Question

您好我选择了一个crossbrowser select，它在浏览器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中正确设置背景位置。这有一个很好的解决方法吗？我没找到任何东西。

感谢。

Answer 1

首先，你的CSS中有一个拼写错误：

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

应该是：

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

您忘记了 -

如果我在IE11中查看此JSFIDDLE，我会看到箭头与您想要的对齐。你也看到了吗？

在IE中选择的背景在右边的情况下

1 个答案: