Mengapa Saya Tidak Boleh Menukar Warna Kotak Semak dengan CSS?

Mengapa Mustahil untuk Menukar Warna Kotak Semak Tanpa mengira Pengubahsuaian Kod?

Walaupun terdapat usaha untuk menyesuaikan warna latar belakang kotak pilihan melalui CSS, banyak pengguna menghadapi kekurangan perubahan yang boleh dilihat. Isu ini telah berleluasa dalam Firefox 29 dan lebih baru.

Penjelasan

Ketidakupayaan untuk mengubah warna kotak pilihan berpunca daripada peninggalan sengaja fungsi ini dalam HTML. Kotak semak dan butang radio dianggap sebagai unsur bentuk "asli", bermakna penampilannya dikawal oleh penyemak imbas dan bukannya peraturan CSS. Penyemak imbas mengutamakan ketekalan dalam antara muka pengguna, dan dengan itu, mereka menguatkuasakan sifat visual lalai untuk elemen ini.

Penyelesaian

Untuk mengatasi had ini dan menyesuaikan penampilan kotak pilihan, pertimbangkan untuk menggunakan sifat CSS berikut:

<code class="css">accent-color</code>

Dengan menetapkan sifat ini, anda mendapat kawalan ke atas warna aksen yang digunakan pada kotak pilihan, yang merangkumi tanda semak dan sebarang latar belakang yang disertakan. Berikut ialah contoh:

<code class="css">#cb1 {
  accent-color: #9b59b6; /* Change the color of the check mark within checkbox #cb1 to blue */
}</code>

Demonstrasi

Lihat demo di bawah untuk menyaksikan kejayaan pengubahsuaian warna kotak pilihan menggunakan sifat warna aksen:

<code class="html"><input id="cb1" type="checkbox" checked />
<input id="cb2" type="checkbox" checked />
<input id="cb3" type="checkbox" checked /></code>

<code class="css">#cb1 {
  accent-color: #9b59b6;
}

#cb2 {
  accent-color: #34495e;
}

#cb3 {
  accent-color: #e74c3c;
}</code>

Atas ialah kandungan terperinci Mengapa Saya Tidak Boleh Menukar Warna Kotak Semak dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!