Implementieren benutzerdefinierter Radio- und Kontrollkästchenfunktionen mit reinem CSS
|
1. Erzielen Sie den Effekt
2 Wissenspunkte 2.1 <label>-Tag In HTML wird das <label>-Tag normalerweise zusammen mit dem <input>-Tag verwendet. Das <label>-Tag definiert eine Beschriftung (Markierung) für das Eingabeelement. Das Label-Element bietet dem Benutzer keine Spezialeffekte. Der Zweck des <label>-Tags besteht darin, die Benutzerfreundlichkeit für Mausbenutzer zu verbessern. Wenn der Benutzer auf den Inhalt des <label>-Tags klickt, verschiebt der Browser den Fokus automatisch auf das mit dem Label verknüpfte Steuerelement . Das <label>-Tag wird häufig bei Optionsfeldern und Kontrollkästchen verwendet. Nachdem Sie dieses Tag verwendet haben, können Sie das entsprechende Optionsfeld oder Kontrollkästchen auch auswählen, indem Sie auf den Inhalt des Label-Tags klicken. Syntaxformat des <label>-Tags: <label for="Zugehörige Steuerelement-ID" form="Liste der Formular-IDs">Textinhalt</label> Die ID des zugehörigen Steuerelements bezieht sich im Allgemeinen auf die ID des Eingabeelements. In HTML5 wird ein neues Attributformular hinzugefügt. Das Formularattribut wird verwendet, um die ID-Liste eines oder mehrerer Formulare anzugeben, zu denen es gehört, getrennt durch Leerzeichen. Wenn das <label>-Tag nicht im Formulartag <form> enthalten ist, muss das Formularattribut verwendet werden, um das Formular anzugeben, zu dem es gehört. Für das <label>-Element sind keine besonderen Stilüberlegungen erforderlich. Strukturell ist ein <label> ein einfaches Inline-Element, sodass Stile auf ganz ähnliche Weise wie bei einem <span>- oder <a>-Element angewendet werden können. 2.2 CSS3-Boxschatteneigenschaft Die Eigenschaft „boxShadow“ fügt einer Box einen oder mehrere Schlagschatten hinzu. Diese Eigenschaft ist eine durch Kommas getrennte Liste von Schatten, von denen jeder durch 2-4 Längenwerte, einen optionalen Farbwert und ein optionales Inset-Schlüsselwort angegeben wird. Der Wert der ausgelassenen Länge ist 0. Grammatik:
2.3 CSS3-Übergangseigenschaft Mit der Übergangseigenschaft wird der Übergangseffekt des Elements festgelegt. Die vier abgekürzten Eigenschaften sind: Übergangseigenschaft Übergangsdauer Übergangszeitfunktion Übergangsverzögerung Grammatik
2.4 CSS3: geprüfter Selektor Der Selektor :checked stimmt mit jedem aktivierten Eingabeelement überein (gilt nur für Optionsfelder oder Kontrollkästchen). 2.5 CSS-Element + Elementselektor Der Element+Element-Selektor wird verwendet, um das Element auszuwählen, das unmittelbar auf das erste angegebene Element folgt (und sich nicht darin befindet). Beispiel: Wählen Sie alle <p>-Elemente aus, die unmittelbar nach einem <div>-Element stehen:
3 Code-Implementierung
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<Titel></Titel>
<style type="text/css">
#hauptsächlich {
Anzeige: Flex;
Inhalt ausrichten: zentriert;
Elemente ausrichten: zentrieren;
Flex-Wrap: Umwickeln;
}
#wickeln {
Position: relativ;
Rand: 10px;
}
.Artikel {
Breite: 100px;
Höhe: 100px;
Hintergrundfarbe: #9E9E9E;
Position: relativ;
Kastenschatten: 0 0 0 3px #dbe0e3;
Übergang: alle 0,5 s;
Cursor: Zeiger;
}
.item img {
Breite: 20px;
Höhe: 20px;
Position: absolut;
unten: 0px;
rechts: 0px;
Deckkraft: 0;
}
Eingabe [Typ = "Radio"],
Eingabe[Typ="Kontrollkästchen"] {
Anzeige: keine;
}
Eingabe: aktiviert + Bezeichnung .item {
Kastenschatten: 0 0 0 3px #00a3ff;
Farbe: #FFFFFF;
Hintergrundfarbe: #efad4c;
}
Eingabe: aktiviert + Bezeichnung .item img {
Deckkraft: 1;
}
.Inhalt {
Schriftgröße: 30px;
Textausrichtung: zentriert;
Zeilenhöhe: 100px;
}
</Stil>
</Kopf>
<Text>
<div id="Haupt">
<h1>Mehrfachauswahl</h1>
<div id="wrap">
<input Typ="Kontrollkästchen" Name="1" ID="Element1" />
<label für="item1">
<div Klasse="Artikel">
<div Klasse="Inhalt">
1
</div>
<img src="ico_checkon.svg" />
</div>
</Bezeichnung>
</div>
<div id="wrap">
<input Typ="Kontrollkästchen" Name="1" ID="Element2" />
<label für="item2">
<div Klasse="Artikel">
<div Klasse="Inhalt">
2
</div>
<img src="ico_checkon.svg" />
</div>
</Bezeichnung>
</div>
<div id="wrap">
<input Typ="Kontrollkästchen" Name="1" ID="Element3" />
<label für="item3">
<div Klasse="Artikel">
<div Klasse="Inhalt">
3
</div>
<img src="ico_checkon.svg" />
</div>
</Bezeichnung>
</div>
<div id="wrap">
<input Typ="Kontrollkästchen" Name="1" ID="Element4" />
<label für="item4">
<div Klasse="Artikel">
<div Klasse="Inhalt">
4
</div>
<img src="ico_checkon.svg" />
</div>
</Bezeichnung>
</div>
<div id="wrap">
<input Typ="Kontrollkästchen" Name="1" ID="Element5" />
<label für="item5">
<div Klasse="Artikel">
<div Klasse="Inhalt">
5
</div>
<img src="ico_checkon.svg" />
</div>
</Bezeichnung>
</div>
<h1>Einzelauswahl</h1>
<div id="wrap">
<input type="radio" name="1" id="item6" />
<label für="item6">
<div Klasse="Artikel">
<div Klasse="Inhalt">
1
</div>
<img src="ico_checkon.svg" />
</div>
</Bezeichnung>
</div>
<div id="wrap">
<input type="radio" name="1" id="item7" />
<label für="item7">
<div Klasse="Artikel">
<div Klasse="Inhalt">
2
</div>
<img src="ico_checkon.svg" />
</div>
</Bezeichnung>
</div>
<div id="wrap">
<input type="radio" name="1" id="item8" />
<label für="item8">
<div Klasse="Artikel">
<div Klasse="Inhalt">
3
</div>
<img src="ico_checkon.svg" />
</div>
</Bezeichnung>
</div>
<div id="wrap">
<input type="radio" name="1" id="item9" />
<label für="item9">
<div Klasse="Artikel">
<div Klasse="Inhalt">
4
</div>
<img src="ico_checkon.svg" />
</div>
</Bezeichnung>
</div>
<div id="wrap">
<input type="radio" name="1" id="item10" />
<label für="item10">
<div Klasse="Artikel">
<div Klasse="Inhalt">
5
</div>
<img src="ico_checkon.svg" />
</div>
</Bezeichnung>
</div>
</div>
</body>
</html>Dies ist das Ende dieses Artikels über die Implementierung benutzerdefinierter Optionsfelder und Kontrollkästchen mit reinem CSS. Weitere relevante benutzerdefinierte Optionsfelder und Kontrollkästchen mit CSS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: Der Speicherplatz wird in den Browsern IE, Firefox und Chrome unterschiedlich angezeigt
>>: Implementieren Sie eine einfache Suchmaschine auf Basis von MySQL
Artikel empfehlen
Detaillierte Erklärung des VUE-Reaktionsprinzips
Inhaltsverzeichnis 1. Grundlage des Responsive-Pr...
MySQL 8.0.22 Zip-komprimierte Paketversion (kostenlose Installation) Download, Installations- und Konfigurationsschritte detailliert
Inhaltsverzeichnis Der erste Schritt besteht dari...
MySQL-Datenbank-JDBC-Programmierung (Java stellt eine Verbindung zu MySQL her)
Inhaltsverzeichnis 1. Grundvoraussetzungen für di...
Beispiel zum Aktivieren des Brotli-Komprimierungsalgorithmus für Nginx
Brotli ist ein neues Datenformat, das eine um 20 ...
Lösung für die Navicat Premier-Remoteverbindung zum MySQL-Fehler 10038
Schlägt die Remote-Verbindung zu MySQL fehl, kann...
CSS3-Zeitleistenanimation
Ergebnisse erzielen html <h2>CSS3-Zeitleist...
Hinweise zur IE8-Kompatibilität, die mir aufgefallen sind
1. getElementById von IE8 unterstützt nur IDs, nic...
Eine detaillierte Einführung in die Speicherverwaltung und -adressierung unter Linux
Inhaltsverzeichnis 1. Konzept Speicherverwaltungs...
Auf Wiedersehen Docker: So wechseln Sie in 5 Minuten zu Containerd
Docker ist eine sehr beliebte Containertechnologi...
Detaillierte Erläuterung des Master-Slave-Konfigurationstutorials von Redis unter Docker
1. Ziehen Sie das Redis-Image docker pull redis 2...
Detaillierte Erklärung zur Verwendung von MySQL, wobei
Inhaltsverzeichnis 1. Einleitung 2. Haupttext 2.1...
Verwendung der MySQL SHOW STATUS-Anweisung
Um die Leistung von MySQL anzupassen und den Dien...
Detailliertes Beispiel für SpringBoot + nginx zum Erreichen der Ressourcen-Upload-Funktion
Vor Kurzem habe ich gelernt, mit Nginx statische ...
Zusammenfassung zur Verwendung der Reduce()-Methode in JS
Inhaltsverzeichnis 1. Grammatik 2. Beispiele 3. A...
So verwenden Sie Docker-Compose, um Django-Anwendungen offline bereitzustellen
Inhaltsverzeichnis Installieren Sie Docker-ce für...