如何设置样式 select crossbrowser

Question

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

我试过了 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;
    }

谢谢

Answer 1

那呢？ 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。但未针对旧版本进行测试

Answer 2

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

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

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

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

如何设置样式 select crossbrowser

How to style select crossbrowser

css

select

cross-browser

styling