Ta czysta metoda CSS3 upiększania przycisków radiowych sprawdza się dobrze w następujących sytuacjach:
1. Może być kompatybilny z IE9 i wyższymi, a jeśli musi być kompatybilny z IE8, napisz hack IE, aby usunąć ten styl
2. Obsługiwane jest tylko radio z przyciskami radiowymi, ponieważ okrąg stylu wyboru przycisków radiowych można wyznaczyć za pomocą CSS, ale pole zaznaczenia wymaga biblioteki czcionek obrazków lub ikon
3. Nie jest wymagany JS do obsługi efektów przełączania
Poniższy obraz przedstawia ostateczne renderowanie:
Kod HTML:
Kod CSS:
Najważniejsze w tej metodzie jest wybór nazwy klasy efektu: .radio input:checked + span.radio-on
+ jest pseudoklasą CSS2, co oznacza, że div+p wybiera <div> wszystkie elementy bezpośrednio po elemencie <p> .
Oznacza to, że znajdź wybrane wejście (:zaznaczone), a następnie użyj elementu rozpięcia o nazwie radio-on, aby wykonać efekt wybranego koła.
W Internecie istnieje wiele metod upiększania, które pozwalają na utworzenie etykiety koła, ale w tym przypadku pojedynczy tekst wyboru musi być umieszczony poza etykietą, co powoduje, że po kliknięciu na tekst efekt pojedynczego wyboru nie może być przełączony.
Dodałem więc do etykiety rozpiętość o nazwie radio-bg, aby utworzyć duże koło z tyłu, a potem użyłem przęsła o nazwie radio-on, aby utworzyć małe koło z przodu wybranego okręgu.
W ten sposób tekst w etykiecie jest zachowywany, a efekt pojedynczego wyboru można również przełączać.
Dołączone: jQuery wykorzystuje metodę wartości wybranego radia
var val=$('input:radio[name="sex"]:checked').val();
Dołącz wszystkie trzy metody:
$('input:radio:checked').val();
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();
|
Opublikowano 16.05.2019 11:10:41
|
|
|
|
