【问题标题】:How to change `select` element for IE? [duplicate]如何更改 IE 的“选择”元素? [复制]
【发布时间】:2016-05-11 18:06:39
【问题描述】:

我看到this answerselect 元素上渲染一个箭头:

select {
    width: 268px;
    padding: 5px;
    font-size: 16px;
    line-height: 1;
    border: 0;
    border-radius: 5px;
    height: 34px;
    background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
    -webkit-appearance: none;
    background-position-x: 244px;
}

http://jsfiddle.net/qhCsJ/4120/

它适用于 Chrome。

对于 Firefox,-moz-appearance: none; 可以解决问题。

但是对于 IE 我就不知道了。

【问题讨论】:

    标签: css


    【解决方案1】:

    添加这个(我猜是 IE 10 +):

    select::-ms-expand {
        display: none;
    }
    

    学分:Remove Select arrow on IE

    对于 IE9,用 div 包装您的选择并使用类似这样的内容(将在原始图像之上的图像):

    select {
        width: 268px;
        padding: 5px;
        font-size: 16px;
        line-height: 1;
        border: 0;
        border-radius: 5px;
        height: 34px;
        -webkit-appearance: none;
        background-position-x: 244px;
    }
    
    select::-ms-expand {
        display: none;
    }
    
    div {
        position:relative;
        display:inline-block;
        border:solid black 1px;
        z-index:0
    }
    div select {
        z-index:1;
    }
    
    div:before {
        background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_up.png) no-repeat right #ddd;
        display:block;
        position:absolute;
        content:'';
        right:6px;
        top:5px;
        height:1em;
        width:1em;
        margin:2px;
        z-index:5;
    }
    

    IE 8 或之前你不能。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2015-03-24
      • 2022-11-26
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多