Geek Answers Handbook

The right way to style selection menus for cross-browser features

I ran into this problem using the select menu, it's about styling it with CSS and jQuery. So far, I have managed to get this result, which I really like: enter image description here

still it works fine in mozila, opera, chrome, IE7 +.

This is the source that I have at the moment:

HTML:

<select class="styled" name=""> <option>Select title</option> <option>Mr.</option> <option>Mrs.</option> <option>Miss.</option> </select>

CSS:

 select { border: 1px solid #d6d8db; background-color: #ecedee; text-transform: uppercase; color: #47515c; padding: 12px 10px 12px 10px; width: auto; cursor: pointer; margin-bottom: 10px; } select > option { text-transform: uppercase; padding: 5px 0px; } .customSelect { border: 1px solid #d6d8db; background-color: #ecedee; text-transform: uppercase; color: #47515c; padding: 12px 10px 12px 10px; margin-bottom: 10px; } .customSelect.changed { background-color: #f0dea4; } .customSelectInner { background:url(../images/select_arrows.png) no-repeat center right; }

jQuery consists of two parts: - a plugin - and control code

This can be shown in the FIDDLE I just created: http://jsfiddle.net/s6jGW/1/

Note that there is "External Resources" on the left.

What i want to achieve

  • Falling down I want to stylize it so that it looks something like on the image (I mean parameters like - height - padding) when hovering: enter image description here

  • I do not want SELECT TITLE to be as a selection option, it should only be the title of the selection window. in this fiddle you can see that this is also an option. http://jsfiddle.net/s6jGW/1/

  • Simply put, the most important, I VIEW CROSS BROWSER VIEW SOLUTION.

thanks in advance

+4
source share
1 answer

The right way to style selection menus for cross-browser features

Refuse, there is no way to cross-browser for styles and selection items. You will need to replace them with your own HTML-based controls.

But if you want to insist (and probably abandon old browsers), the following links may help:

+11
source

More articles:


All Articles