Jump to content

Styling A Form's Drop-down Menu?


mboehler3

Recommended Posts

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:drop2.gifI'm able to get a basic, standard drop-down menu, over my input box image, like this:drop1.gifIs 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!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

border:0; then...

Link to comment
Share on other sites

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?
Link to comment
Share on other sites

It does work in FireFox, but not IE
Try using the selector #inputwrap input[type=select]Otherwise I'm out of ideas
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Very nice

Link to comment
Share on other sites

youre not obliged to use jquery constantly

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...