首页 > web前端 > css教程 > 正文

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

Mary-Kate Olsen
发布: 2024-11-23 17:18:15
原创
993 人浏览过

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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板