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

问题描述

我想用伪 :after 在选择框上添加一些样式(用 2 个部分和没有图像来设置我的选择框的样式).这是 HTML:

I would like to add some style on a select box with the pseudo :after (to style my select box with 2 parts and without images). Here's the HTML:

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

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

And it doesn't work. I don't know why and I didn't find the answer in the W3C specs. Here's the 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;
}

所以这是正常的还是有什么窍门?

So is it normal or is there a trick?

推荐答案

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

I haven't checked this extensively, but I'm under the impression that this isn't (yet?) possible, due to the way in which select elements are generated by the OS on which the browser runs, rather than the browser itself.

这篇关于<select> 的问题和 :after 在 WebKit 中使用 CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！