Bagaimanakah Saya Boleh Menggayakan Kotak Pilihan dengan ::selepas dalam WebKit?

Bergaya Elemen dalam WebKit Menggunakan CSS: Satu Teka-teki

Penggayaan elemen dalam WebKit memberikan cabaran yang unik. Pembangun selalunya cuba mempertingkatkan penampilan mereka menggunakan elemen pseudo CSS, seperti ::after. Walau bagaimanapun, dalam senario tertentu, menghadapi isu menjadi tidak dapat dielakkan. Marilah kita menyelidiki pertanyaan khusus yang menyerlahkan teka-teki ini.

Pertanyaan: Menggayakan Kotak dengan ::selepas

Matlamatnya adalah untuk menggayakan kotak dengan dua bahagian yang berbeza, tanpa bergantung pada imej. HTML adalah mudah:

<select name="">
  <option value="">Test</option>
</select>

Sekarang, mari kita perkenalkan beberapa 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;
}

Malangnya, penggayaan tidak dipaparkan seperti yang diharapkan. Bingung dengan kegagalan itu, pembangun mendapatkan panduan dalam spesifikasi W3C tetapi muncul dengan tangan kosong.

Jawapan: Had Potensi

Berdasarkan pemerhatian, nampaknya menambah ::selepas ke gaya elemen pada masa ini tidak disokong dalam WebKit. Had ini mungkin timbul daripada cara sistem pengendalian menjana elemen ini, memintas kawalan penyemak imbas.

Kesimpulannya, semasa menggayakan elemen mungkin kelihatan mudah dalam kebanyakan pelayar, WebKit membentangkan halangan unik apabila menggunakan ::after. Buat masa ini, pendekatan alternatif mungkin diperlukan untuk mencapai kesan yang diingini.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggayakan Kotak Pilihan dengan ::selepas dalam WebKit?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!