The correct way of styling a select menu for cross browser functionality [duplicate]

Question

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

1. 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:

2. 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/

3. Probebly most important, I AM LOOKING FOR CROSS BROWSER SOLUTION.

Thank you in advance

Answer 1

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.