为什么我的 CSS 伪元素样式在选择框上不起作用？-css教程-PHP中文网

为什么我的 CSS 伪元素样式在选择框上不起作用？

Mary-Kate Olsen

发布： 2024-11-30 12:02:13

原创

362 人浏览过

Why Doesn't My CSS Pseudo-Element Styling Work on Select Boxes?

使用 CSS 设置选择元素样式：使用伪元素选择框的怪癖

尝试在 WebKit 中使用伪元素设置选择框样式时Safari 和 Chrome 等浏览器可能会出现意外行为。您可能想知道为什么以下代码没有产生预期的效果：

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

登录后复制

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

登录后复制

问题源于操作系统参与渲染选择元素。尽管选择框是 HTML 元素，但它们通常由操作系统呈现，这可能会妨碍自定义样式工作。此限制会影响基于 WebKit 的浏览器以及其他依赖于操作系统的渲染引擎。

因此，使用伪元素样式化选择元素（例如上例中的 :after 选择器）可能不会预期效果或在不同系统中可能表现不一致。

以上是为什么我的 CSS 伪元素样式在选择框上不起作用？的详细内容。更多信息请关注PHP中文网其他相关文章！