Question

您好我正在寻找一个解决方案，为我的选择提供一个crossbrowser风格。目前，我的选择（下拉列表）在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;
    }

谢谢

Answer 1

另一种选择是不使用select。你可以建立一个下拉列表，正如ibm所做的那样：

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

请改用ul。并且一直跨浏览器。

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

Answer 2

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

它使用这些选择器

int

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

如何设置样式选择crossbrowser

2 个答案: