Cara membetulkan pilihan berkilat dalam webkit (Safari)

Masalah keserasian merentas pelayar: Menggayakan elemen HTML <select> dalam Safari

Mengekalkan gelagat aplikasi yang konsisten merentas enjin penyemak imbas yang berbeza boleh menjadi mencabar. Baru-baru ini, semasa membangunkan devpad—sebuah projek yang saya sengaja mengelak rangka kerja UI dan sangat bergantung pada elemen HTML asas—saya menghadapi isu pelik dengan elemen <select> dalam Safari.

Pada mulanya, pembangunan berjalan lancar menggunakan Arc (pelayar berasaskan Chromium). Walau bagaimanapun, ujian dalam Safari mendedahkan percanggahan visual yang tidak dijangka:

Imej ini mempamerkan perbezaan ketara antara elemen <select> yang diberikan dalam Chromium dan Safari:

Rendering Safari mempamerkan rupa yang lapuk dan berkilat, tidak seperti rupa bersih dalam Chromium. Selepas penyelidikan menyeluruh merentas Stack Overflow dan ChatGPT, akhirnya saya menemui penyelesaian.

Cadangan Limpahan Tindanan yang biasa ialah menggunakan -webkit-appearance: none;. Walau bagaimanapun, ini mengalih keluar penunjuk anak panah lungsur, memberi kesan kepada pengalaman pengguna.

Pendekatan yang lebih menjanjikan, yang disebut kemudiannya, melibatkan penggunaan imej latar belakang SVG. Ini terbukti rumit apabila turut menggunakan warna latar belakang.

Memanfaatkan ikon Lucide.dev, saya menggabungkan anak panah SVG. Pada mulanya, bagaimanapun, perubahan warna dinamik melalui pembolehubah CSS gagal. Pertanyaan @media dalam elemen select juga terbukti tidak berkesan:

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

Penyelesaian, terima kasih kepada ChatGPT, melibatkan pengekodan URL rentetan SVG:

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

Keputusan akhir: elemen <select> serasi dan serasi silang penyemak imbas dengan sokongan mod gelap/cahaya.

Penyelesaian ini seharusnya menjimatkan masa dan usaha orang lain dalam menangani cabaran penggayaan silang pelayar biasa ini. Untuk butiran lanjut tentang projek devpad, sila rujuk catatan blog terbaru saya.

Atas ialah kandungan terperinci Cara membetulkan pilihan berkilat dalam webkit (Safari). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!