<select> 和 :after 在 WebKit 中的 CSS 问题

Question

我想用伪 :after 在选择框上添加一些样式（用 2 个部分和没有图像来设计我的选择框）。这是 HTML：

 <select name="">
  <option value="">Test</option>
</select>

它不起作用。我不知道为什么，也没有在 W3C 规范中找到答案。这是 CSS：

 select {
  -webkit-appearance: none;
  background: black;
  border: none;
  border-radius: 0;
  color: white;
}

select:after {
  content: " ";
  display: inline-block;
  width: 24px; height: 24px;
  background: blue;
}

那么这是正常现象还是有什么窍门呢？

原文由 Nicolas Merouze 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我没有对此进行广泛检查，但我的印象是这（还？）不可能，因为 select 元素是由浏览器运行的操作系统生成的，而不是浏览器本身。

原文由 David Thomas 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

我一直在寻找同样的东西，因为我选择的背景与箭头颜色相同。如前所述，还不可能在选择元素上使用 :before 或 :after 添加任何内容。我的解决方案是创建一个包装器元素，在其上添加以下 :before 代码。

 .select-wrapper {
    position: relative;
}

.select-wrapper:before {
    content: '\f0d7';
    font-family: FontAwesome;
    color: #fff;
    display: inline-block;
    position: absolute;
    right: 20px;
    top: 15px;
    pointer-events: none;
}

这是我的选择

select {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    padding: 10px 20px;
    background: #000;
    color: #fff;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

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

我为我的新箭头使用了 FontAwesome.io，但你可以使用任何你想要的。显然，这不是一个完美的解决方案，但根据您的需要，这可能就足够了。

原文由 sroy 发布，翻译遵循 CC BY-SA 3.0 许可协议