您好，我设计了一个跨浏览器选择，它在浏览器 chrome、IE 和 safari 上具有相同的设计。我为此使用了以下代码(在右侧的空白处有正常的箭头图标):
select{
transition: border-color ease-in-out 0.15s;
background: transparent;
border: 1px solid $BORDER_COLOR;
outline: 0;
padding: 5px 25px 5px 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("arrow_down_grey.svg") no-repeat center right;
}
select::ms-expand {
display: none;
}<body>
<label>City</label>
<select>
<option>Zurich</option>
<option>Vienna</option>
<option>Berlin</option>
</select>
<label>Country</label>
<select>
<option>Switzerland</option>
<option>Austria</option>
<option>Germany</option>
</select>
</body>在浏览器 chrome 和 safari(台式机和平板电脑)上它工作正常，看起来像这样:
但在 IE 上，图标在左侧，而不是像在其他浏览器中那样在右侧:
我发现了一条评论，说 IE 无法在 select 中正确设置背景位置。有没有好的解决方法？我什么也没找到。
谢谢。
最佳答案
首先，你的 CSS 中有一个拼写错误:
select::ms-expand {
display: none;
}
应该是:
select::-ms-expand {
display: none;
}
你忘记了-
其次，如果我看这个JSFIDDLE在 IE11 中，我看到箭头像你想要的那样向右对齐。你也看到了吗？
关于css - IE中select的背景 left if right，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37340230/