Reine CSS-Implementierung eines Radio- und Checkbox-Effektbeispiels

Radio und Kontrollkästchen

Reines CSS zum Erzielen von Radio- und Checkbox-Effekten

Radio zurücksetzen

Bei der Entwicklung von PC-Projekten werden häufig Radio- und Kontrollkästchenkomponenten verwendet. Da die nativen Stile jedoch relativ inkonsistent mit dem Designstil des Designers sind, verweisen wir häufig auf Module von Drittanbietern, um sie zu implementieren, oder hacken sie mit anderen Methoden wie JS. Dies erhöht nicht nur die Codemenge, sondern ist auch sehr kompliziert, daher gibt es diese reine CSS-Implementierung, die auf native input[radio] und input[checkbox] basiert. Der Hauptcode lautet wie folgt:

HTML-Hauptcode

<div Klasse="reset-radio">
    <input checked type="radio" id="age1" name="age">
    <span class="real-target"></span>
</div>

CSS-Code, hier hauptsächlich zur Zusammenarbeit mit einem untergeordneten Knotenbereich bei der Eingabe: Überprüfter Bruder-Selektor zum Ändern des Stils

.reset-radio {
    Anzeige: Inline-Block;
    Position: relativ;
    Breite: 16px;
    Höhe: 16px;
}

.reset-radio .real-target {
    Z-Index: 1;
    Breite: 100 %;
    Höhe: 100%;
    Position: absolut;
    Anzeige: Inline-Block;
    Hintergrund: #ffffff;
    Rand: 1px durchgezogen #dadde0;
    Randradius: 100 %;
    oben: 0;
    links: 0;
    unten: 0;
}

.reset-radio input[Typ=Radio] {
    Cursor: Zeiger;
    Z-Index: 2;
    Breite: 16px;
    Höhe: 16px;
    Deckkraft: 0;
    Position: absolut;
    links: 0;
    oben: 0;
    Rand: 0;
    rechts: 0;
    unten: 0;
}

.reset-radio input:geprüft+span {
    Rahmenfarbe: #48b4ec;
}

.reset-radio input:geprüft+span::vorher {
    Inhalt: '';
    Position: absolut;
    Hintergrund: #48b4ec;
    Breite: 6px;
    Höhe: 6px;
    oben: 50 %;
    links: 50%;
    transformieren: übersetzen(-50 %, -50 %);
    Randradius: 100 %;
}

Kontrollkästchen zurücksetzen

Das Prinzip der Reset-Checkbox ist dasselbe, daher werde ich nicht ins Detail gehen.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.