A simple trick used here on the site that creates an extremely useful visual effect. It can also help improve usability-by-design.

The principle concept behind this script allows for the original <select> box to be styled in sch a way that the regular intrusive boxed arrow is hidden outside of the width paramaters of the <div> surrounding it. To begin let's take a look at the basic setup surrounding the HTML code.



The code above looks pretty simple in itself, and in all reality it is. With uCoz sites this design method can be applied to any mail form(s) with <select>'s involved or alternatively customised fields used anywhere on a site. To apply it all you have to do is add the <div> tags so that it (the <div>) encloses the select.

Once we have added the <div> tags we can now style our <select> in the sites CSS document. To do this open Control Panel » Customise Design » Style Sheet (CSS). Paste the following lines of CSS code somewhere in the document giving them some spacing around them.



The styles currently applied will produce the result as can be seen on this sites contact page however the colouring can be adjusted to anything you would like. Creative developers may also wish to create their own background images which can be applied in the CSS making the select still have an arrow – however that arrow will now be one of style and good design.