The correct way of styling a select menu for cross browser functionality
css, html, javascript, jquery
Solution
The correct way of styling a select menu for cross browser functionality
Give up, there is no cross-browser way to style select and option elements. You'll need to replace them with your own, HTML-based controls.
But, if you want to insist (and probably give up on older browsers), the following links might help:
- How to style a <select> dropdown with CSS only without JavaScript?
- Styling or Replacing the Standard Select Element.
Problem
I came across this problem with a select menu, it's about styling it with the help of CSS & Jquery. By now, I managed to get this result, which I really like it: till now it works perfect in mozila, opera, chrome, IE7+. This is the source which 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; } ``` The jQuery is composed from two parts: - the plugin - and the control code This can be viewd in the FIDDLE that i just created: http://jsfiddle.net/s6jGW/1/ Please note there is "External Resources" on the left. What I want to achieve The drop down I want to style it so that it will look approximately like in the image (I mean those options like - height - padding - on hover: I don't want the "SELECT TITLE" to be as a selection option, it must be only the title of the select box. in this fiddle you can see the it is as a option too. http://jsfiddle.net/s6jGW/1/ Probebly most important, I AM LOOKING FOR CROSS BROWSER SOLUTION. Thank you in advance