Question

我正在使用select标签，以下是我用来隐藏元素附带的默认下拉按钮的css：

select,
input { 
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    -ms-appearance: none;
    appearance: none;
}

它适用于除IE以外的所有浏览器。我尝试使用扩展选项，但也无效。

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

如何隐藏选择标记的下拉列表，以便我可以添加我的愿望图标？

提前致谢

Answer 1

将select标记包裹在div内并进行一些调整。你会得到想要的效果。请参阅代码段

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

将适用于IE 10及更高版本，对于IE 9及更低版本，我们可以通过给予包装器的宽度小于select元素的宽度来做一个技巧。因此，插入符按钮将溢出父节点并变为隐藏。

＆＃13;

.select{
    width:80px;
    overflow:hidden;
    border: 1px solid #333;
    padding: 0;
}
select::-ms-expand {
    display: none;
}
.select select{
    width: 120px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 6px 15px;
    border: none;
    background: transparent url("https://cdn2.iconfinder.com/data/icons/navigation-set-arrows-part-two/32/Arrow_Download-16.png")       no-repeat 60px center;
    outline: 0;
}

＆＃13;

<div class="select">
     <select>
          <option value="1">Option</option>
          <option value="2">Option</option> 
          <option value="3">Option</option> 
     </select>  
 </div>

＆＃13;

如何针对选择标签样式定位IE

1 个答案: