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