首页  >  文章  >  web前端  >  为什么我的 CSS `::after` 伪元素没有在 WebKit 选择框上渲染?

为什么我的 CSS `::after` 伪元素没有在 WebKit 选择框上渲染?

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-11-23 17:18:151013浏览

Why Doesn't My CSS `::after` Pseudo-element Render on a WebKit Select Box?

CSS:未使用 WebKit 选择框渲染后

问题:

使用 CSS 操作选择框外观 ::在伪元素之后创建一个没有图像的自定义下拉列表被证明是不成功的。尽管应用了适当的 CSS 规则,:after 元素仍然存在不可见。

HTML:

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

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;
}

观察:

尽管应用了 :after 元素,但仍无法出现

解决方案:

不幸的是,由于 WebKit 浏览器中的某些技术限制,这种自定义目前似乎不可行。选择框渲染通常由操作系统而不是浏览器本身处理,这限制了通过 CSS 完全控制其外观的能力。

以上是为什么我的 CSS `::after` 伪元素没有在 WebKit 选择框上渲染?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn