Jump to content

Styling A Form's Drop-down Menu?


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 post
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

Edited by chibineku
Link to post
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 post
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.

Edited by chibineku
Link to post
Share on other sites

border:0; then...

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

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

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

Very nice

Link to post
Share on other sites

youre not obliged to use jquery constantly

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...