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

<分区>

我在选择菜单时遇到了这个问题，它是关于在 CSS 和 Jquery 的帮助下设置样式的。到目前为止，我设法得到了这个结果，我非常喜欢它: enter image description here

到目前为止，它在 mozila、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/

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

我想要实现的目标

我想对下拉菜单进行样式设置，使其看起来与图像中的大致相同(我的意思是那些选项，例如 - 高度 - 填充 - 悬停时:
我不希望“SELECT TITLE”作为选择选项，它必须只是选择框的标题。在这个 fiddle 中你可以看到它也是一个选项。 http://jsfiddle.net/s6jGW/1/
可能最重要的是，我正在寻找跨浏览器解决方案。