为跨浏览器功能设置选择菜单样式的正确方法[重复]

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:

到目前为止，它在 mozilla、opera、chrome、IE7+ 上都能完美运行。

这是我目前拥有的来源：

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 由两部分组成： - 插件 - 和控制代码

这可以在我刚刚创建的 FIDDLE 中查看：http://jsfiddle.net/s6jGW/1/ http://jsfiddle.net/s6jGW/1/

请注意左侧有“外部资源”。

我想要实现什么

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. 我不希望“选择标题”作为选择选项，它必须只是选择框的标题。在此小提琴中，您也可以看到它也是一个选项。http://jsfiddle.net/s6jGW/1/ http://jsfiddle.net/s6jGW/1/

3. 也许最重要的是，我正在寻找跨浏览器解决方案。

先感谢您

为跨浏览器功能设置选择菜单样式的正确方法

放弃吧，没有跨浏览器的方式来设置选择和选项元素的样式。您需要将它们替换为您自己的基于 HTML 的控件。

但是，如果您想坚持（并且可能放弃旧版浏览器），以下链接可能会有所帮助：

• 如何仅使用 CSS 而不使用 JavaScript 来设置 下拉菜单的样式？ https://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript
• 设计或替换标准选择元素 https://stackoverflow.com/questions/7321261/styling-or-replacing-the-standard-select-element.