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
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7
In diesem Tutorial erfahren Sie alles über die In...
Webseite WB.ExecWB - Beschreibung des Aufrufs der Druckmethode und Einführung in die Parameter
Webseite WB.ExecWB-Steuerungsdruckmethode Code ko...
Zusammenfassung der Konfigurationsprobleme von Nginx-Standort und Proxy-Pass-Pfad
Inhaltsverzeichnis 1. Grundlegende Konfiguration ...
So entfernen Sie Inline-Stile, die durch das Stilattribut (element.style) definiert sind
Wenn Sie Magento häufig ändern, stoßen Sie möglich...
So legen Sie fest, dass die Auswahl schreibgeschützt und nicht editierbar ist und der Auswahlwert passierbar ist
1. <select style="width:195px" name=&...
Grafisches Tutorial zur Installation und Konfiguration von mysql 8.0.18.zip (Windows 64 Bit)
Informationen zum Deinstallieren der zuvor instal...
Der gesamte Prozess der Entwicklung eines Google-Plug-Ins mit vue+element
Einfache Funktion: Klicken Sie auf das Plug-In-Sy...
Detaillierte Schritte zur Verwendung von Redis in Docker
1. Einleitung Dieser Artikel zeigt Ihnen, wie Sie...
Designtheorie: Hierarchie im Design
<br />Originaltext: http://andymao.com/andy/...
Aufzeichnungen zur Verwendung von SSH-Befehlen unter Windows 8
1. Öffnen Sie die virtuelle Maschine und das Git-...
Detaillierte Schritte zum Ausführen eines Springboot-Projekts in Linux Docker
Einführung: Die Konfiguration von Docker, auf dem...
Verwendung der MySQL SHOW STATUS-Anweisung
Um die Leistung von MySQL anzupassen und den Dien...
Vue-Beispielcode für die Online-Vorschau von Office-Dateien
Ich arbeite derzeit an elektronischen Archiven un...
Lösungen zum Erstellen von Ping und NFS in einer eingebetteten Linux-Entwicklungsumgebung
1. Eingebettete Softwareebene 1) Bootloader->B...
Problem mit der V-HTML-Rendering-Komponente
Da ich bereits HTML analysiert habe, möchte ich h...