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

Question

我在选择菜单中遇到了这个问题,它是在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. 下拉我想要设计它,使它看起来大致像图像(我的意思是那些选项,如 - 高度 - 填充 - 悬停:

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

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

先感谢您

Answer 1

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

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

但是,如果您想坚持(并且可能放弃旧版浏览器),以下链接可能有所帮助:

• 如何在没有JavaScript的情况下使用CSS设置<select>下拉列表的样式？
• 样式化或替换标准选择元素.