Petua CSS: Cara Menggayakan Kotak Semak Menggunakan CSS

Question

Saya cuba menggayakan kotak pilihan menggunakan yang berikut:

<input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" />

Tetapi gaya tidak digunakan. Kotak pilihan masih memaparkan gaya lalainya. Bagaimana untuk memberikan gaya tertentu?

P粉973899567 · Answer

Dengan menggunakan fungsi baharu yang disertakan dengan :after 和 :before kelas pseudo, anda boleh mencapai kesan kotak pilihan tersuai yang sangat hebat. Kelebihan ini ialah anda tidak perlu menambah apa-apa lagi pada DOM, hanya kotak semak standard.

Sila ambil perhatian bahawa ini hanya berfungsi pada penyemak imbas yang serasi. Saya percaya ini ada kaitan dengan sesetengah penyemak imbas yang tidak membenarkan anda menetapkan :after 和 :before pada elemen input. Malangnya, ini bermakna pada masa ini hanya pelayar WebKit yang disokong. Firefox + Internet Explorer masih membenarkan kotak semak berfungsi, hanya tanpa penggayaan, yang dijangka akan berubah pada masa hadapan (kod tidak menggunakan awalan vendor).

Ini hanyalah penyelesaian penyemak imbas WebKit (Chrome, Safari, penyemak imbas mudah alih)

Lihat contoh Fiddle

$(function() {
  $('input').change(function() {
    $('div').html(Math.random());
  });
});

/* Main Classes */
.myinput[type="checkbox"]:before {
  position: relative;
  display: block;
  width: 11px;
  height: 11px;
  border: 1px solid #808080;
  content: "";
  background: #FFF;
}

.myinput[type="checkbox"]:after {
  position: relative;
  display: block;
  left: 2px;
  top: -11px;
  width: 7px;
  height: 7px;
  border-width: 1px;
  border-style: solid;
  border-color: #B3B3B3 #dcddde #dcddde #B3B3B3;
  content: "";
  background-image: linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
  background-repeat: no-repeat;
  background-position: center;
}

.myinput[type="checkbox"]:checked:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
}

.myinput[type="checkbox"]:disabled:after {
  -webkit-filter: opacity(0.4);
}

.myinput[type="checkbox"]:not(:disabled):checked:hover:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);
}

.myinput[type="checkbox"]:not(:disabled):hover:after {
  background-image: linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);
  border-color: #85A9BB #92C2DA #92C2DA #85A9BB;
}

.myinput[type="checkbox"]:not(:disabled):hover:before {
  border-color: #3D7591;
}

/* Large checkboxes */
.myinput.large {
  height: 22px;
  width: 22px;
}

.myinput.large[type="checkbox"]:before {
  width: 20px;
  height: 20px;
}

.myinput.large[type="checkbox"]:after {
  top: -20px;
  width: 16px;
  height: 16px;
}

/* Custom checkbox */
.myinput.large.custom[type="checkbox"]:checked:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVQ4y2P4//8/AyUYwcAD+OzN/oMwshjRBoA0Gr8+DcbIhhBlAEyz+qZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
}

.myinput.large.custom[type="checkbox"]:not(:disabled):checked:hover:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVQ4y2P4//8/AyUYwcAD+OzN/oMwshjRBoA0Gr8+DcbIhhBlAEyz+qZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);
}




  
    Normal:
    
    
    
    
  
  
    Small:
    
    
    
    
  
  
    Large:
    
    
    
    
  
  
    Custom icon:

Selak biola gaya Webkit tambahan

$(function() {
  var f = function() {
    $(this).next().text($(this).is(':checked') ? ':checked' : ':not(:checked)');
  };
  $('input').change(f).trigger('change');
});

body {
  font-family: arial;
}

.flipswitch {
  position: relative;
  background: white;
  width: 120px;
  height: 40px;
  -webkit-appearance: initial;
  border-radius: 3px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  outline: none;
  font-size: 14px;
  font-family: Trebuchet, Arial, sans-serif;
  font-weight: bold;
  cursor: pointer;
  border: 1px solid #ddd;
}

.flipswitch:after {
  position: absolute;
  top: 5%;
  display: block;
  line-height: 32px;
  width: 45%;
  height: 90%;
  background: #fff;
  box-sizing: border-box;
  text-align: center;
  transition: all 0.3s ease-in 0s;
  color: black;
  border: #888 1px solid;
  border-radius: 3px;
}

.flipswitch:after {
  left: 2%;
  content: "OFF";
}

.flipswitch:checked:after {
  left: 53%;
  content: "ON";
}



Webkit friendly mobile-style checkbox/flipswitch

P粉851401475 · Answer

Kemas kini:

Jawapan di bawah merujuk kepada situasi sebelum CSS 3 digunakan secara meluas. Dalam penyemak imbas moden, termasuk Internet Explorer 9 dan lebih baru, lebih mudah untuk membuat penggantian kotak pilihan dengan gaya kegemaran anda, tanpa menggunakan JavaScript.

Berikut adalah beberapa pautan berguna:

Buat kotak semak borang tersuai hanya menggunakan CSS李>
Penjana Kotak Semak CSS Mudah
Perkara yang boleh anda lakukan dengan Hack Kotak Semak
Gunakan CSS3 untuk melaksanakan kotak pilihan tersuai dan butang radio
Cara menggayakan kotak pilihan menggunakan CSS

Perlu diingat bahawa masalah asas tidak berubah. Anda masih tidak boleh menggunakan gaya (sempadan, dsb.) terus pada elemen kotak pilihan dan gaya tersebut mempengaruhi paparan kotak semak HTML. Apa yang telah berubah, bagaimanapun, ialah kini mungkin untuk menyembunyikan kotak semak sebenar dan menggantikannya dengan elemen gaya anda sendiri, hanya menggunakan CSS. Khususnya, memandangkan CSS kini telah menyokong :checked pemilih secara meluas, anda boleh membuat penggantian dengan betul menggambarkan keadaan kotak yang ditandai.

Jawapan lama

Ini ialah artikel berguna tentang Menggayakan Kotak Pilihan. Pada asasnya, pengarang ini mendapati bahawa ia sangat berbeza antara penyemak imbas, dan tidak kira bagaimana anda menggayakannya, banyak penyemak imbas sentiasa menunjukkan kotak pilihan lalai. Jadi sebenarnya bukan cara yang mudah.

Tidak sukar untuk membayangkan penyelesaian di mana anda boleh menggunakan JavaScript untuk menindih imej pada kotak pilihan, dan kemudian mengklik pada imej menyebabkan kotak semak sebenar ditandakan. Pengguna tanpa JavaScript akan melihat kotak pilihan lalai.

Diedit untuk menambah: Berikut ialah skrip bagus yang melakukan ini untuk anda ; ia menyembunyikan elemen kotak semak sebenar, menggantikannya dengan skop yang digayakan dan mengubah hala acara klik.