Pure CSS3 radyo düğmelerini güzelleştirir

Küçük · Yayınlandı 16.05.2019 11:10:41

Bu saf CSS3 radyo tuşlarını güzelleştirme yöntemi aşağıdaki durumlarda iyi çalışır:

1. IE9 ve üzeri ile uyumlu olabilir ve IE8 ile uyumlu olması gerekirse, stili kaldırmak için IE'nin hilesini yazın

2. Sadece radyo düğmeli radyo desteklenir, çünkü radyo düğme seçim tarzının çemberi CSS ile yapılabilir, ancak kontrol düğmesi kutusu için bir resim veya simge yazı kütüphanesi gereklidir

3. Anahtarlama efektlerini desteklemek için JS gerekmez

Aşağıdaki görsel son render şeklidir:

HTML kodu:

Giriş görünür.

CSS kodu:

Giriş görünür.

Bu yöntemde en önemli şey, efektin sınıf adını seçmektir: .radio input:checked + span.radio-on

+, CSS2'nin bir sözde sınıfıdır; bu da div+p'nin <div> elemandan hemen sonra gelen tüm <p> elemanları seçtiği anlamına gelir.

Yani, seçilen girişi bulun (:checked) ve ardından radio-on adlı span elemanını kullanarak seçilen daire etkisini gerçekleştirir.

İnternette etiketi daire haline getirmek için birçok güzelleştirme yöntemi vardır, ancak bu durumda tek seçim metni etiketin dışına yerleştirilmelidir; bu da metne tıklandığında tek seçim etkisinin değiştirilememesine yol açar.

Bu yüzden etikete radio-bg adında bir açıklık ekledim ve arkasındaki büyük daireyi oluşturdum, ardından seçimin önündeki küçük daireyi oluşturmak için radio-on adlı bir açıklık kullandım.

Bu şekilde, etiketteki metin korunur ve tek seçimin etkisi de değiştirilebilir.

Ekli: jQuery, seçilen radyonun değer yöntemini alır

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

Üç yöntemi de ekleyin:

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

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

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

[CSS/DIV] Pure CSS3 radyo düğmelerini güzelleştirir

İlgili Yazılar

Görüntülenen bölümler