Webkit (Safari) で光沢のある選択を修正する方法

ブラウザ間の互換性の問題: Safari での HTML <select> 要素のスタイル設定

異なるブラウザ エンジン間でアプリケーションの一貫した動作を維持することは困難な場合があります。 最近、devpad (意図的に UI フレームワークを避け、ベース HTML 要素に大きく依存したプロジェクト) を開発しているときに、Safari の <select> 要素に関する特有の問題に遭遇しました。

当初、開発は Arc (Chromium ベースのブラウザ) を使用して順調に進みました。 ただし、Safari でテストしたところ、予期しない視覚的な矛盾が明らかになりました。

この画像は、Chromium と Safari でレンダリングされた <select> 要素の驚くべき違いを示しています。

Safari のレンダリングは、Chromium のきれいな外観とは異なり、時代遅れで光沢のある外観を示しました。 Stack Overflow と ChatGPT にわたって広範な調査を行った結果、ついに解決策を見つけました。

スタック オーバーフローの一般的な提案は、-webkit-appearance: none; を使用することです。 ただし、これによりドロップダウン矢印インジケーターが削除され、ユーザー エクスペリエンスに影響します。

後で説明する、より有望なアプローチには、SVG 背景画像の使用が含まれます。 背景色も適用する場合、これは難しいことがわかりました。

Lucide.dev アイコンを利用して、SVG 矢印を組み込みました。 ただし、最初は CSS 変数による動的な色の変更は失敗しました。 @media 要素内の select クエリも効果がないことが判明しました:

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... */
}

ChatGPT のおかげで、この解決策には SVG 文字列の URL エンコードが含まれていました。

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;
  }
}

最終結果: ダーク/ライト モードをサポートする一貫したブラウザ間互換性のある <select> 要素。

このソリューションは、この一般的なクロスブラウザーのスタイル設定の課題に取り組む他の人の時間と労力を節約するはずです。 devpad プロジェクトの詳細については、私の最新のブログ投稿を参照してください。

以上がWebkit (Safari) で光沢のある選択を修正する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。