4

我在选择菜单中遇到了这个问题，它是关于在 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. 可能最重要的是，我正在寻找跨浏览器解决方案。

先感谢您

4

1 回答 1

11

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

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

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

于 2013-03-19T19:02:08.757 回答