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

Question

我通过选择菜单遇到了这个问题，它是关于CSS和CSS的帮助造型的。 jQuery的。到现在为止，我设法得到了这个结果，我非常喜欢它：

直到现在它在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/

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

我想要实现的目标

1. 下拉列表我想要设置样式，使其看起来与图像大致相似（我的意思是那些选项，如 - height - padding - on hover：

2. 我不希望“SELECT TITLE”作为选择选项，它必须只是选择框的标题。在这个小提琴中你可以看到它也是一个选项。 http://jsfiddle.net/s6jGW/1/

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

提前谢谢

Answer 1

  

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

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

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

• How to style a <select> dropdown with CSS only without JavaScript?
• Styling or Replacing the Standard Select Element。