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
Informationen zum Ausdruck „wenn Komma enthält“ in JavaScript
Manchmal sehen Sie in der if-Anweisung in JavaScr...
Detailliertes Tutorial zum Konfigurieren der lokalen Yum-Quelle in CentOS8
Die Centos8-Distribution wird über die BaseOS- un...
Einfaches Anwendungsbeispiel für rekursive MySQL 8.0-Abfragen
Vorwort Dieser Artikel verwendet die neuen Funkti...
Auf den Alibaba Cloud Server Tomcat kann nicht zugegriffen werden
Inhaltsverzeichnis 1. Einleitung 2. Lösung 2.1 Ko...
Warum der Speicherplatz nach dem Löschen von Daten in MySQL nicht freigegeben wird
Inhaltsverzeichnis Problembeschreibung Lösung Pro...
Eine Reihe häufig verwendeter Betriebs- und Wartungsbefehle für Linux (Zusammenfassung)
Inhaltsverzeichnis 1. Systemüberwachung 2. Dateio...
Eine kurze Erläuterung der Lösung für den Fehler beim Starten der Serverinstallation in MySQL
Wenn Sie MySQL zum ersten Mal auf Ihrem Computer ...
Verwendung von TypeScript-Generics
Inhaltsverzeichnis 1. Einfach zu bedienen 2. Verw...
Detailliertes Beispiel der Lesegeschwindigkeit von JS-Objekten
1. Der Zugriff auf Literale und lokale Variablen ...
Detaillierte Erklärung der atomaren DDL-Syntax von MySQL 8.0
Inhaltsverzeichnis 01 Einführung in Atomic DDL 02...
So beheben Sie den MySQL-FEHLER 1045 (28000) - Zugriff wegen Benutzer verweigert
Problembeschreibung (die folgende Diskussion besc...
Detaillierte Erläuterung der Implementierung mehrerer dreispaltiger adaptiver CSS-Layouts
Vorwort Um dem herkömmlichen WEB-Layout zu folgen...
So implementieren Sie die Kommunikation zwischen Docker-Containern
Szenario: Eine Laradock-Entwicklungsumgebung (php...
Detaillierte Erläuterung der kleinen Zustandsverwaltung basierend auf React Hooks
Inhaltsverzeichnis Implementierung der Statusfrei...
Lösen Sie das Problem, dass Bilder und andere Ressourcen nach der erneuten Bereitstellung von Tomcat automatisch gelöscht werden
Gestern, als ich die Funktion zum Hochladen von B...