為什麼我的 CSS 偽元素樣式在選擇框上不起作用？

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