Mengapa Penggayaan Elemen Pseudo CSS Saya Tidak Berfungsi pada Kotak Terpilih?

Menggayakan Elemen Pilih dengan CSS: Keanehan dalam Kotak Pilihan dengan Elemen Pseudo

Apabila cuba menggayakan kotak pilihan menggunakan elemen pseudo dalam WebKit pelayar, seperti Safari dan Chrome, tingkah laku yang tidak dijangka boleh timbul. Anda mungkin tertanya-tanya mengapa kod berikut tidak menghasilkan kesan yang diingini:

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

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

Isu ini berpunca daripada penglibatan OS dalam memaparkan elemen terpilih. Walaupun merupakan elemen HTML, kotak pilihan biasanya dipaparkan oleh sistem pengendalian, yang boleh menghalang usaha penggayaan tersuai. Had ini memberi kesan kepada kedua-dua penyemak imbas berasaskan WebKit serta enjin pemaparan bergantung kepada OS yang lain.

Akibatnya, menggayakan elemen pilih menggunakan elemen pseudo, seperti pemilih :selepas dalam contoh di atas, mungkin tidak mempunyai kesan yang dimaksudkan atau mungkin berkelakuan tidak konsisten merentas sistem yang berbeza.

Atas ialah kandungan terperinci Mengapa Penggayaan Elemen Pseudo CSS Saya Tidak Berfungsi pada Kotak Terpilih?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!