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
Docker-Bereitstellung von Kafka und Spring Kafka-Implementierung
In diesem Artikel wird hauptsächlich die Bereitst...
Element Plus implementiert Affix
Inhaltsverzeichnis 1. Komponenteneinführung 2. Qu...
Verschachtelte Verwendungsoperation für MySQL-Aggregatfunktionen
Zweck: Verschachtelte Verwendung von MySQL-Aggreg...
Geben Sie einige Tipps zur Verwendung von JavaScript-Operatoren
Inhaltsverzeichnis 1. Optionaler Verkettungsopera...
Tutorial zur DHCP-Konfiguration in der CentOS7-Umgebung
Inhaltsverzeichnis Konfigurationsbefehlsschritte ...
Erläuterung des MySQL-Nicht-Null-Einschränkungsfalls
Inhaltsverzeichnis Legen Sie beim Erstellen einer...
Ausführliche Erklärung verschiedener binärer Objektbeziehungen in JavaScript
Inhaltsverzeichnis Vorwort Beziehungen zwischen v...
Nodejs verwendet Readline, um zur Eingabe von Beispielcode für Inhalte aufzufordern
Inhaltsverzeichnis Vorwort 1. bat führt js aus 2....
Fassen Sie einige häufige Rankingprobleme in MySQL zusammen
Vorwort: In manchen Anwendungsszenarien stoßen wi...
Implementierungsprinzip und Konfiguration der MySql Master-Slave-Replikation
Die Trennung von Lese- und Schreibzugriffen in Da...
Vue realisiert einfachen Effekt des Lauflichts
In diesem Artikel wird der spezifische Code von V...
Einige Datenverarbeitungsmethoden, die häufig in JS verwendet werden können
Inhaltsverzeichnis DOM-Verarbeitung Arrays Verfah...
Detaillierte Erklärung zweier Methoden zur Behebung eines Fehlers in der Justify-Content-Space-Between-Ausrichtung des Flex-Layouts
Wenn Sie „display:flex, justify-content: space-be...
So implementieren Sie die @person-Funktion über Vue
Dieser Artikel verwendet Vue und fügt Mausklicker...
Perfekte Lösung für den Themenwechsel basierend auf CSS-Variablen (empfohlen)
Als Baidu diese Anforderung erhielt, fand das Unt...