html option tag styling?

[davelf]

Hi, here's the problem how to make option tag style like this one?



thank you very much

[Beverleyh]

I'm not sure you can without using Flash. You can use a background image in the CSS to alter the look of the input field, but the drop-down arrow is generated by the browser. The arrow will look nicer in newer browsers and I imagine the nicest (probably very similar to your example pic) in Mac. [please feel free to correct me if I'm wrong though]

<select class="form-field" name="number" id="number">
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>

select.form-field {
background:transparent url("images/form-field.jpg") 0 0 no-repeat;
border:none; 
color:#666; 
padding:7px; 
width:200px; 
float:left; 
}

[davelf]

Hi Beverleyh, thx for your reply.

I used the same method like you did, and that right the only problem is the arrow button. I think there's some kind of JS or Jquery to solve this.

Hmm, i think i posted it in the wrong section.

[traq]

something like this might be what you're looking for

[Beverleyh]

I'll make a note of that one too - thanks traq

[molendijk]

From a css-point-of-view, there's not much you can do in the case of (authentic!) select boxes, see this.
===
Arie Molendijk

[davelf]

thx traq, Beverleyh's, molendijk

[Lozu]

You can create a long div at the left with background and the text you want, then the div on the right would be the arrow.
make sure that they float next to each other.

Then add a javascript code that will toggle to show the 3rd div at the bottom.

Inside the 3rd div follow http://web.enavu.com/demos/jquery_hover/ and add exact the same thing.
remove ul border or the div border and change your hover color.

i hope that helps.