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:

Wert	beschreiben
links	Lässt das Element nach links schweben.
Rechts	Lässt das Element nach rechts schweben.
keiner	Standardwert. Das Element schwebt nicht und wird dort angezeigt, wo es im Text steht.
erben	Gibt an, dass der Wert der Float-Eigenschaft vom übergeordneten Element übernommen werden soll.

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.

HINWEIS: Absolut positionierte Elemente ignorieren die Float-Eigenschaft!

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?

So importieren Sie Vue-Komponenten automatisch bei Bedarf

Reines CSS zum Implementieren der Funktion zum Öffnen und Schließen von Auswahlfeldern im iOS-Stil

So importieren Sie Vue-Komponenten automatisch bei Bedarf

Analyse der neuen Funktionen von MySQL 8.0 - Transaktionales Datenwörterbuch und Atomic DDL

Zusammenfassung der Probleme beim Hinzufügen, Löschen, Ändern und Abfragen von MySQL-Tabellen, -Spalten und -Datenbanken

Detaillierte Erklärung, warum MySQL nicht mit UNION zwei Abfragen verbinden kann

Lösung für Workbench, das keine Verbindung zu MySQL auf Alibaba Cloud Server Ubuntu herstellt (getestet)

Prinzip des MySQL-Indexfehlers

CSS3 realisiert den Effekt der kontinuierlichen Dreiecksvergrößerung

Erste Schritte mit MySQL Sharding

Tutorial zur Installation und Konfiguration von MySQL für Mac

Weitere Features der JavaScript-Konsole

Artikel empfehlen

So entwickeln Sie Uniapp mit vscode

So implementieren Sie die Navigationsfunktion im WeChat Mini-Programm

Natives JS zum Erreichen von Spezialeffekt-Meldungsfeldern

So erstellen und führen Sie ein Django-Projekt in Ubuntu 16.04 unter Python 3 aus

So fragen Sie dieselbe Tabelle in einer MySQL-Datenbank gleichzeitig ab und aktualisieren sie

Zusammenfassung des MySQL-Installationsdiagramms

Detaillierte Erläuterung des React setState-Datenaktualisierungsmechanismus

So ändern Sie die Ali-Quelle in Ubuntu 20.04

Tutorial-Diagramm zur VMware-Installation des Ubuntu 20.04-Betriebssystems

So installieren Sie den Chrome-Browser auf CentOS 7

Mit dem Swiper.js-Plugin ist die Implementierung von Karussellbildern ganz einfach

Beispiele für Clearfix und Clear

So kommunizieren Sie mit anderen Benutzern über die Linux-Befehlszeile

Wissen Sie, warum Vue-Daten eine Funktion sind?

So verwenden Sie den Befehl dig/nslookup zum Anzeigen von DNS-Auflösungsschritten