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

Posted 2023-03-05

【中文标题】为跨浏览器功能设置选择菜单样式的正确方法[重复]

【英文标题】：The correct way of styling a select menu for cross browser functionality [duplicate]

【发布时间】：2013-03-08 15:19:53

【问题描述】：

我在选择菜单中遇到了这个问题，它是关于在 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/

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

我想要达到的目标

我想对下拉菜单进行样式设置，使其看起来与图像中的大致相似（我的意思是那些选项，例如 - 高度 - 填充 - 悬停时：

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

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

提前致谢

【问题讨论】：

查看polymer-project.org 网站上的“下拉框”。它们是跨浏览器的“下拉框”，但不使用 <select>

【参考方案1】：

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

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

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

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

【讨论】：

HTML5 对输入/选择/表单元素进行了大量升级。我迫不及待地希望他们在任何地方都被接受。

好的，第二个问题怎么样？

@AndrewS 也许是一个带有绝对位置的标签，再加上一些 JavaScript？正如我所说，我认为您需要一个完全自定义的选择。