为了实现跨浏览器功能，正确的样式选择菜单的方法。

这个问题已经有了答案:

如何只用CSS样式一个下拉框？

我在使用下拉菜单时遇到了这个问题，需要利用CSS和JQuery进行样式设置。目前，我已经获得了我喜欢的结果，如下图所示：

目前它在Mozilla、Opera、Chrome、IE7+中都完美运行。

以下是我目前拥有的源代码：

HTML：

Select title
Mr.
Mrs.
Miss.

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/

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

我想要实现的目标

1. 我希望样式设置后，下拉菜单外观与图像大致相同（我指的是那些选项，例如高度、填充、在悬停时：

   

2. 我不希望“SELECT TITLE”成为选择选项，它必须仅作为下拉框的标题。在这个FIDDLE中，您可以看到它也是一个选项。

   http://jsfiddle.net/s6jGW/1/

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

提前谢谢您