CSS3 murni mempercantik tombol radio

Sampah kecil · Diposting pada 16/05/2019 11.10.41

Metode CSS3 murni untuk mempercantik tombol radio ini bekerja dengan baik dalam situasi berikut:

1. Ini dapat kompatibel dengan IE9 dan di atasnya, dan jika perlu kompatibel dengan IE8, tulis peretasan IE untuk menghapus gayanya

2. Hanya radio tombol radio yang didukung, karena lingkaran gaya pemilihan tombol radio dapat dibuat dengan CSS, tetapi kotak centang tombol centang memerlukan perpustakaan font gambar atau ikon

3. Tidak diperlukan JS untuk mendukung efek switching

Gambar di bawah ini adalah rendering akhir:

Kode HTML:

Login terlihat.

Kode CSS:

Login terlihat.

Hal terpenting dalam metode ini adalah memilih nama kelas efek: .radio input:checked + span.radio-on

+ adalah pseudoclass dari CSS2, yang berarti bahwa div+p memilih <div> semua elemen segera setelah elemen <p> .

Artinya, temukan input yang dipilih (:checked), lalu gunakan elemen span bernama radio-on untuk melakukan efek lingkaran yang dipilih.

Ada banyak metode kecantikan di Internet untuk membuat label menjadi lingkaran, tetapi dalam hal ini, teks seleksi tunggal harus ditempatkan di luar label, yang mengarah pada fakta bahwa saat mengklik teks, efek seleksi tunggal tidak dapat dialihkan.

Jadi saya menambahkan rentang bernama radio-bg ke label untuk membuat lingkaran besar di bagian belakang, dan kemudian menggunakan rentang bernama radio-on untuk membuat lingkaran kecil di depan seleksi.

Dengan cara ini, teks dalam label dipertahankan, dan efek seleksi tunggal juga dapat dialihkan.

Terlampir: jQuery mengambil metode nilai radio yang dipilih

var val=$('input:radio[name="sex"]:checked').val();

Lampirkan ketiga metode:

$('input:radio:checked').val();

$("input[type='radio']:checked").val();

$("input[name='rd']:checked").val();

[CSS/DIV] CSS3 murni mempercantik tombol radio

Pos terkait

Bagian yang dilihat