Die :optionalPseudoklasse zielt auf Eingaben (einschließlich s) ab, die nicht speziell als festgelegt sind required(ohne das requiredAttribut).
Dies kann nützlich sein, wenn Sie optionalen Feldern ein bestimmtes Aussehen verleihen möchten, das möglicherweise etwas weniger sichtbar ist als die erforderlichen.
Syntax
input(type=text):optional ( border: 1px solid #eee; )Demo
In der folgenden Demo wurde die Deckkraft optionaler Felder („Name“, „Geschlecht“ und „Kontinent“) auf 40% gesenkt, sodass Benutzer sofort wissen, welche Felder erforderlich sind. In diesem Fall "E-Mail". Wenn Sie den Mauszeiger bewegen, wird bei einer optionalen Eingabe die Deckkraft auf 100% zurückgesetzt.
Das optionalfunktioniert für alle Arten von Formularelementen: Texteingaben aller Art, Optionsfelder, Kontrollkästchen und Auswahlmöglichkeiten.
Hinweis: Sie können mit CSS nicht nur wissen, dass ein Etikett einem optionalen Feld zugeordnet ist, es sei denn, das Etikett kommt nach der Eingabe (und Sie verwenden einen Geschwisterkombinator), was selten und normalerweise keine gute Idee ist. Vielleicht können in Zukunft übergeordnete Selektoren dabei helfen.
Browser-Unterstützung
| Chrom | Safari | Feuerfuchs | Oper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 10+ | 5+ | 4+ | 10+ | 10+ | Irgendein | 5+ |
Beachten Sie, dass dies :optionalnicht genau das Gegenteil von ist, :not(:required)da letzteres mit allen Arten von Elementen übereinstimmt, während :optionales auf die Formularelemente beschränkt ist.