首頁  >  文章  >  web前端  >  為什麼我的 CSS `::after` 偽元素沒有在 WebKit 選擇框上渲染?

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

Mary-Kate Olsen
Mary-Kate Olsen原創
2024-11-23 17:18:151016瀏覽

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