如何在 WebKit 中使用 ::after 设置选择框的样式？

时尚 WebKit 中使用 CSS 的元素：一个难题

样式 ; WebKit 中的元素提出了独特的挑战。开发人员经常尝试使用 CSS 伪元素（例如 ::after）来增强其外观。然而，在某些情况下，遇到问题是不可避免的。让我们深入研究一个突出这个难题的特定查询。

查询：设置 的样式带有 ::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;
}

不幸的是，样式没有按预期呈现。由于对失败感到困惑，开发人员在 W3C 规范中寻求指导，但一无所获。

答案：潜在的限制

根据观察，似乎将 ::after 添加到样式 WebKit 目前不支持 elements。这种限制可能是由于操作系统绕过浏览器控制生成这些元素的方式引起的。

总之，在设计 样式时，元素在大多数浏览器中可能看起来很简单，但 WebKit 在使用 ::after 时遇到了独特的障碍。目前，可能需要其他方法才能达到预期效果。

以上是如何在 WebKit 中使用 ::after 设置选择框的样式？的详细内容。更多信息请关注PHP中文网其他相关文章！