Diese reine CSS3-Methode zur Verschönerung von Funktasten funktioniert in folgenden Situationen gut:
1. Es kann mit IE9 und höher kompatibel sein, und falls es mit IE8 kompatibel sein muss, schreibe IEs Hack, um den Stil zu entfernen
2. Es wird nur Funkfunk mit Funkknopf unterstützt, da der Kreis der Funkknopfauswahl mit CSS erstellt werden kann, aber das Kontrollkästchen für das Kontrollkästchen erfordert eine Bild- oder Icon-Schriftbibliothek
3. Kein JS ist erforderlich, um Switching-Effekte zu unterstützen
Das untenstehende Bild zeigt die endgültige Darstellung:
HTML-Code:
CSS-Code:
Das Wichtigste bei dieser Methode ist, den Klassennamen des Effekts auszuwählen: .radio input:checked + span.radio-on
+ ist eine Pseudoklasse von CSS2, was bedeutet, dass div+p <div> alle Elemente unmittelbar nach dem Element <p> auswählt.
Das heißt, man findet die ausgewählte Eingabe (:checked) und verwendet dann das Span-Element namens radio-on, um den ausgewählten Kreiseffekt auszuführen.
Es gibt viele Verschönerungsmethoden im Internet, um das Etikett zu einem Kreis zu formen, aber in diesem Fall muss der einzelne Auswahltext außerhalb des Etiketts platziert werden, was dazu führt, dass beim Klicken auf den Text der einzelne Auswahleffekt nicht umgeschaltet werden kann.
Also habe ich dem Etikett eine Spannweite namens radio-bg hinzugefügt, um den großen Kreis hinten zu bilden, und dann eine Spannweite namens radio-on verwendet, um den kleinen Kreis vorne in der Auswahl zu bilden.
Auf diese Weise bleibt der Text im Label erhalten, und der Effekt der einzelnen Auswahl kann ebenfalls umgeschaltet werden.
Angehängt: jQuery verwendet die Wert-Methode des ausgewählten Funks
var val=$('input:radio[name="sex"]:checked').val();
Fügen Sie alle drei Methoden bei:
$('eingabe:radio:geprüft').val();
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();
|
Veröffentlicht am 16.05.2019 11:10:41
|
|
|
|
