Styling A Form's Drop-down Menu?

[mboehler3 9]

Hi I want to add style to the drop down menu on my form. Here's a picture of what I want it to look like:I'm able to get a basic, standard drop-down menu, over my input box image, like this:Is it possible to get the first picture as a result using CSS? Any help is appreciated, I just need to be pointed in the right direction.Thanks!

[chibineku 0]

Hm, well you can change the background color and the width to push the arrow over and give it border none, but there isn't a selector for styling the arrow itself as it appears to be a browser default. You can absolutely position an image over the arrow, but it prevents you clicking the real one. Some javascript might be able to get around that, otherwise your best bet is just using a drop down list with the appropriate functionality added via javascript.Edit: what font is that? I like it

Edited September 24, 2009 by chibineku

[mboehler3 9]

How would I style the bgcolor, width and border? The code on the page for the second image looks like this:

<div id="inputWrap"><select name='ImportantFactor'>	<option value='Select one'>Select one</option>	<option value='Full-service'>Full-service</option>	<option value='Online'>Online</option>	<option value='Price'>Price</option>	<option value='Customer service'>Customer service</option>	<option value='Other'>Other</option></select></div>

As you can see there's no class set up for the dropdown.

[chibineku 0]

#inputwrap select {background: #whatever;border: none;width: whatever;}Re font: same as the one I have - good thing I like it.

Edited September 24, 2009 by chibineku

[mboehler3 9]

what font is that? I like it

Arial, Regular, 12px, Sharp (in Photoshop CS3)

[mboehler3 9]

#inputwrap select {background: #whatever;border: none;width: whatever;}Re font: same as the one I have - good thing I like it.

border:none; doesn't seem to work... is there another way to remove that 1px border around the box?

[chibineku 0]

border:0; then...

[mboehler3 9]

border:0; then...

That doesn't work either... I'm searching other sites too but can't find a solution...

[chibineku 0]

That doesn't work either... I'm searching other sites too but can't find a solution...

Hm, works in FF. What are you trying it in?

[mboehler3 9]

That doesn't work either... I'm searching other sites too but can't find a solution...

It does work in FireFox, but not IE

[chibineku 0]

It does work in FireFox, but not IE

Try using the selector #inputwrap input[type=select]Otherwise I'm out of ideas

[mboehler3 9]

Try using the selector #inputwrap input[type=select]Otherwise I'm out of ideas

I don't understand that code... like #inputwrap {input-type:select;}? That doesn't exist...

[chibineku 0]

sorry, i meant:#inputwrap input[type=select] {rules}

[mboehler3 9]

so like this?#inputwrap input[type=select] {border:0px;}

[chibineku 0]

Yeah, that ought to work....but actually in FF doens't seem to. The selector is valid in IE, I believe, but setting border to 0 or none doesn't seem to work... Hate IE!

[mboehler3 9]

Hate IE!

I agree! Thank you for your help

[chibineku 0]

The cross browser compatible way is to alter it from a select menu to a menu with submenu and use CSS pseudo-classes and javascript to give it the functionality you need. Sorry I couldn't be more help.

[Synook 47]

I wrote this script a while ago: http://www.aspektas.com/blog/a-custom-sele...ing-javascript/ - it uses JavaScript to style a select.

[chibineku 0]

Very nice

[mboehler3 9]

I wrote this script a while ago: http://www.aspektas.com/blog/a-custom-sele...ing-javascript/ - it uses JavaScript to style a select.

yea that's a cool script. My site strictly uses jQuery so this isn't an option, but thanks for submitting your link,

[chibineku 0]

youre not obliged to use jquery constantly