如何样式选择跨浏览器[重复]

Posted 2023-03-05

【中文标题】如何样式选择跨浏览器[重复]

【英文标题】：How to style select crossbrowser [duplicate]

【发布时间】：2016-09-16 10:41:50

【问题描述】：

您好，我正在寻找一种解决方案，以便为我的选择提供跨浏览器样式。目前，我的选择（下拉菜单）在 chrome、firefox、safari 和 IE 中看起来不同。我发现了一些问题，但它们并没有真正帮助我。有人知道如何做到这一点吗？目标是，我的选择在每个浏览器中看起来都一样。

我试过这个 css：

    select 
        transition: border-color ease-in-out 0.15s;
        background: transparent;
        border: 1px solid $BORDER_COLOR;
        outline: 0;
        padding: 5px;

        -webkit-user-select: none;
        -moz-user-select: -moz-none;
        -ms-user-select: none;
        user-select: none;

        -webkit-appearance: none;
        -moz-appearance: radio-container;
        appearance: none;

        background: url("../../assets/images/arrow.svg") no-repeat center right;
    

谢谢

【参考方案1】：

另一个选项是不使用selects。您可以像 ibm 那样构建下拉列表：

http://www.ibm.com/design/language/resources/animation-library/ios-drop-down

请改用ul。并一路跨浏览器。

但通常，当我必须这样做时，我将它包装在一个 div 中，并向隐藏胡萝卜的父级添加一个伪元素。确保给select 元素提供height（而不是line-height）。然后你控制伪元素的height。

【参考方案2】：

那又怎样？ http://jsfiddle.net/jphase/quqnmoun/ 来自：http://robido.com/css/pure-css-select-dropdown-style-override-the-default-select-dropdown-styles-with-css/

它使用这些选择器

select::-ms-expand
select:-moz-focusring

它说它适用于 Chrome 45.x、Firefox 41.x 和 Internet Explorer 11.x。但未针对旧版本进行测试

【讨论】：

这真的很酷，我可以使用它 - 谢谢。 :)