Bagaimanakah Saya Boleh Mengubah Saiz Kotak Semak Secara Konsisten Merentasi Pelayar Berbeza Menggunakan CSS?

Menyesuaikan Saiz Kotak Semak dengan CSS

Mengubah suai saiz kotak pilihan boleh menjadi mencabar, terutamanya apabila mencuba keserasian merentas penyemak imbas. Walaupun teknik penggayaan seperti lebar dan saiz berfungsi dalam Internet Explorer 6 dan yang lebih baru, teknik ini tetap tidak berkesan dalam Firefox, di mana kotak semak kekal pada saiz lalai 16x16.

Penyelesaian CSS untuk Pengubah Saiz Rentas Penyemak Imbas

Walaupun tidak menyenangkan dari segi estetika, pendekatan CSS berikut membolehkan penyesuaian saiz kotak pilihan dalam kebanyakan masa moden pelayar:

input[type=checkbox] {
  /* Double-sized Checkboxes */
  -ms-transform: scale(2); /* IE */
  -moz-transform: scale(2); /* FF */
  -webkit-transform: scale(2); /* Safari and Chrome */
  -o-transform: scale(2); /* Opera */
  transform: scale(2);
  padding: 10px;
}

/* Might want to wrap a span around your checkbox text */
.checkboxtext {
  /* Checkbox text */
  font-size: 110%;
  display: inline;
}

Pelaksanaan HTML

Dalam kod HTML anda, sertakan pilihan kotak semak anda dalam kelas yang disediakan untuk menggunakan saiz semula:

<input type="checkbox" name="optiona">

Nota: Penskalaan boleh mengakibatkan ketidaksempurnaan visual. Walau bagaimanapun, penyelesaian ini secara berkesan menyesuaikan saiz kotak pilihan merentas berbilang penyemak imbas, termasuk Firefox.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengubah Saiz Kotak Semak Secara Konsisten Merentasi Pelayar Berbeza Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!