Reines CSS zum Implementieren der Funktion zum Öffnen und Schließen von Auswahlfeldern im iOS-Stil
|
1 Wirkung
Demo-Adresse: https://www.albertyy.com/2020/7/check2.html Ein weiterer Artikel: https://www.jb51.net/css/735639.html 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 CSS-Float-Eigenschaft Die Float-Eigenschaft gibt an, ob eine Box (ein Element) schweben soll. Eigenschaftswert:
So schweben Elemente: Das Element schwebt horizontal, d. h. das Element kann sich nur nach links und rechts, nicht jedoch nach oben und unten bewegen. Ein schwebendes Element wird so weit wie möglich nach links oder rechts bewegt, bis seine Außenkante die Grenze der enthaltenden Box oder einer anderen schwebenden Box berührt. Elemente, die dem schwebenden Element folgen, werden um dieses herumgeführt. Elemente vor dem schwebenden Element sind hiervon nicht betroffen. Floats löschen - Verwenden Sie „clear“: Nachdem ein Element schweben gelassen wurde, werden die umgebenden Elemente neu angeordnet. Um dies zu vermeiden, verwenden Sie die Eigenschaft „clear“. Die Clear-Eigenschaft gibt an, dass auf keiner Seite eines Elements schwebende Elemente erscheinen können.
2.3 CSS3: geprüfter Selektor Der Selektor :checked stimmt mit jedem aktivierten Eingabeelement überein (gilt nur für Optionsfelder oder Kontrollkästchen). 2.4 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:
div+p{ Hintergrundfarbe:gelb; }3 Code-Implementierung
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<Titel></Titel>
<style type="text/css">
.Schalten {
Polsterung: 0;
Breite: 500px;
Rand: automatisch;
}
.Schalter li {
klar: beides;
Zeilenhöhe: 44px;
Rahmen unten: 1px durchgezogen #CCC;
Listenstil: keiner;
}
.Schaltereingang {
Anzeige: keine
}
.Schalterbezeichnung {
Breite: 52px;
Hintergrund: #CCC;
Höhe: 28px;
Rahmenradius: 14px;
schweben: rechts;
Rand: 8px 10px 0 0;
Boxschatten: 0 1px 2px rgba(0, 0, 0, .1) Einschub;
Cursor: Zeiger;
}
.Schalterbezeichnung em {
Breite: 26px;
Höhe: 26px;
schweben: links;
Rand: 1px;
Rahmenradius: 13px;
Kastenschatten: 2px 3px 8px rgba(0, 0, 0, .1);
Hintergrund: #FFF;
}
.Switch-Eingabe: aktiviert + Bezeichnung {
Hintergrund: #a4d714;
}
.Switch-Eingabe: aktiviert + Label em {
schweben: rechts;
}
.Switch-Eingabe:deaktiviert+Bezeichnung {
Deckkraft: 0,5
}
</Stil>
</Kopf>
<Text>
<ul Klasse="Schalter">
<li>
<input type="checkbox" name="Speicher" id="Datum">
Standardmäßig schließen <label for="date"><em></em></label>
</li>
<li>
<input type="checkbox" name="Storage2" id="blance" checked="">
Standardmäßig ist <label for="blance"><em></em></label> aktiviert
</li>
<li>
<input type="checkbox" name="Storage2" id="integral" disabled="">
Nicht verfügbar <label for="integral"><em></em></label>
</li>
</ul>
</body>
</html>Dies ist das Ende dieses Artikels über die Implementierung eines Auswahlfelds zum Öffnen und Schließen im iOS-Stil mit reinem CSS. Weitere relevante CSS-Inhalte zum Öffnen und Schließen von Auswahlfeldern für iOS finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: JS praktisches objektorientiertes Schlangenspielbeispiel
>>: Sperrt Mysql ALTER TABLE die Tabelle beim Hinzufügen von Feldern?
Artikel empfehlen
Eine kurze Analyse des Unterschieds zwischen FIND_IN_SET() und IN in MySQL
Ich habe die Mysql FIND_IN_SET-Funktion vor einig...
Nginx-Stream-Konfigurationsproxy (Nginx TCP/UDP-Lastausgleich)
Auftakt Wir alle wissen, dass nginx ein hervorrag...
Welche Schleife ist in JavaScript die schnellste?
Wenn wir wissen, welche For-Schleife oder welcher...
Detaillierte Erläuterung der Verwendung des DockerHub-Image-Repository
Bisher wurden die von uns verwendeten Images alle...
So verwenden Sie vue3+TypeScript+vue-router
Inhaltsverzeichnis Einfach zu bedienen Erstellen ...
Verwaltung von xinetd-basierten Diensten, die mit RPM-Paketen in Linux installiert wurden
Inhaltsverzeichnis Vorwort 1. Startup-Management ...
Lernen Sie Node.js von Grund auf
Inhaltsverzeichnis URL-Modul 1.Parse-Methode 2. F...
Eine Methode zum Erstellen von Karussellbildern mit CSS3
Diashows sieht man häufig auf Webseiten. Sie enth...
Nginx-Server fügt benutzerdefinierte Systemd-Dienstprozessanalyse hinzu
1. Nehmen Sie nginx als Beispiel Nginx mit dem Be...
HTML+CSS zum Erreichen eines reaktionsfähigen Karten-Hover-Effekts
Inhaltsverzeichnis erreichen: Zusammenfassen: Daz...
Tutorial zu HTML-Tabellen-Tags (31): Breiten- und Höhenattribute für Zellen WIDTH, HEIGHT
Standardmäßig werden Breite und Höhe der Zelle au...
Wird der veraltete Docker durch Podman ersetzt?
Das Kubernetes-Team hat vor Kurzem angekündigt, d...
MySQL View-Prinzipanalyse
Inhaltsverzeichnis Aktualisierbare Ansichten Leis...
Eine kurze Einführung in die Abfrageeffizienz von MySQL-Speicherfeldtypen
Die Suchleistung von der schnellsten bis zur lang...
Probleme mit Index und FROM_UNIXTIME in MySQL
Null, Hintergrund Ich habe diesen Donnerstag viel...