如何修復 webkit (Safari) 中的光澤選擇

跨瀏覽器相容性問題：在 Safari 中設定 HTML <select> 元素的樣式

在不同的瀏覽器引擎之間保持一致的應用程式行為可能具有挑戰性。 最近，在開發 devpad（我在這個專案中故意避免使用 UI 框架並嚴重依賴基本 HTML 元素）時，我遇到了 Safari 中 <select> 元素的特殊問題。

最初，使用 Arc（基於 Chromium 的瀏覽器）進行的開發進展順利。 然而，在 Safari 中進行測試卻發現了意想不到的視覺差異：

這張圖片展示了 Chromium 和 Safari 中渲染的 <select> 元素之間的顯著差異：

Safari 渲染呈現出過時的、有光澤的外觀，與 Chromium 中的乾淨外觀不同。 經過對 Stack Overflow 和 ChatGPT 的廣泛研究，我終於找到了解決方案。

一個常見的 Stack Overflow 建議是使用 -webkit-appearance: none;。 但是，這會刪除下拉箭頭指示器，影響使用者體驗。

隨後提到的一種更有前途的方法涉及使用 SVG 背景圖像。 事實證明，在應用背景顏色時這很棘手。

利用 Lucide.dev 圖標，我合併了一個 SVG 箭頭。 然而，最初，透過 CSS 變數進行動態顏色變更失敗了。 @media 元素內的 select 查詢也被證明是無效的：

<code class="language-css">select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url('data:image/svg+xml;utf8,<svg fill="none" height="24" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M6 9 12 15 18 9"></path></svg>') no-repeat;
  /* ...rest of the CSS... */
}</code>

感謝 ChatGPT，解決方案涉及對 SVG 字串進行 URL 編碼：

<code class="language-css">select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M6%209%2012%2015%2018%209%22/%3E%3C/svg%3E') no-repeat;
  background-size: 18px;
  background-position: calc(100% - 3px) 50%;
  background-repeat: no-repeat;
  background-color: var(--input-background);
  padding-right: 24px;
}

@media (prefers-color-scheme: dark) {
  select {
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22white%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M6%209%2012%2015%2018%209%22/%3E%3C/svg%3E') !important;
  }
}</code>

最終結果：一致、跨瀏覽器相容的<select>元素，支援暗/亮模式。

此解決方案應該可以節省其他人解決這一常見的跨瀏覽器樣式挑戰的時間和精力。 有關 devpad 項目的更多詳細信息，請參閱我最新的博文。

以上是如何修復 webkit (Safari) 中的光澤選擇的詳細內容。更多資訊請關注PHP中文網其他相關文章！