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.

Code
<div class="customSelect">  
<select>  
<option>Option 1</option>  
<option>Option 2</option>  
</select>  
</div>


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.

Code
.customSelect select {font-size:12px; cursor:pointer; background:transparent; width:486px; padding:8px; height:34px; border:#FFFFFF 1px solid;}
.customSelect {cursor:pointer; width:460px; height:34px; overflow:hidden; border:#CFCFCF 1px solid; border-radius:5px;}


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.

  Paradox        3.0        0        31/03/2020

avatar

My Account
You are currently not logged in.

So what are you waiting for?
To get started log in or sign up to Dashboard Support to make use of all our cool site features.

Online Chat
[admin] Paradox: Please log in to take part in online chatter.

Food For Thought

Opinions Wanted!