為什麼我的 CSS `::after` 偽元素沒有在 WebKit 選擇框上渲染？-css教學-PHP中文網

為什麼我的 CSS `::after` 偽元素沒有在 WebKit 選擇框上渲染？

Mary-Kate Olsen

發布： 2024-11-23 17:18:15

原創

1065 人瀏覽過

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中文網其他相關文章！