CSS :optional Pseudo-Klasse
Die CSS-Pseudo-Klasse :optional ermöglicht die Auswahl optionaler Formularfelder. Erklärung und Beispiele.
Die Pseudo-Klasse :optional trifft auf jedes Formularelement zu, das der Benutzer nicht ausfüllen muss. Sie ist das genaue Gegenteil von :required: Ein Element trifft entweder auf das eine oder das andere zu, niemals auf beide.
Ein Formularelement gilt als „optional", weil es das Attribut required nicht besitzt. Diese Seite erklärt, für welche Elemente :optional gilt, wie sie sich von verwandten Pseudo-Klassen unterscheidet und wie man sie einsetzt, um Benutzern einen visuellen Hinweis zu geben, welche Felder sie überspringen können.
Auf welche Elemente trifft :optional zu?
Nur die drei Formularelemente, die das Attribut required akzeptieren, können von :optional erfasst werden:
<input>(außertype="hidden",type="range",type="color", Schaltflächen und ähnliche Typen, die niemals als Pflichtfeld markiert werden können)<select><textarea>
Jedes dieser Elemente ohne das Attribut required wird von :optional erfasst. Elemente, die grundsätzlich nicht als Pflichtfeld markiert werden können — wie <div>, <p> oder ein <button> vom Typ „submit" — werden niemals erfasst.
:optional vs. :required
Diese beiden Pseudo-Klassen teilen alle Pflichtfeldkandidaten auf:
| Element | Erfasst von :required | Erfasst von :optional |
|---|---|---|
<input required> | ja | nein |
<input> | nein | ja |
<select required> | ja | nein |
<textarea> | nein | ja |
Da sich die beiden niemals überschneiden, ist ein verbreitetes Muster, optionale Felder neutral zu lassen und nur Pflichtfelder hervorzuheben — oder, wie im Beispiel unten, optionale Felder abzublenden, damit sie visuell in den Hintergrund treten.
Syntax
:optional {
/* CSS declarations */
}Man kann :optional mit anderen Selektoren und Pseudo-Klassen verketten (z. B. :hover, :focus) sowie mit Pseudo-Elementen (z. B. ::after), um komplexere Zustände abzubilden:
input:optional:focus {
outline: 2px solid #1c87c9;
}Beispiel
Das folgende Beispiel gestaltet optionale Eingabefelder mit einem gedämpften, halbtransparenten Aussehen, das beim Hover aufhellt, während Pflichtfelder einen fettgedruckten unteren Rahmen erhalten, sodass der Unterschied auf einen Blick erkennbar ist:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
margin: 40px auto;
max-width: 400px;
}
label,
button {
display: block;
width: 100%;
margin-bottom: 1.5em;
}
input,
select,
button {
padding: .4em 1em;
}
input,
select {
border: 1px solid #666666;
}
input:optional,
select:optional {
background-color: #eeeeee;
color: #666666;
opacity: 0.5;
transition: .3s;
}
input:optional:hover,
select:optional:hover {
opacity: 1;
}
input:required,
textarea:required {
border-bottom: 3px solid #1c87c9;
}
</style>
</head>
<body>
<h2>:optional selector example</h2>
<div class="example">
<form action="#">
<label>
<input type="text" required />Name *
</label>
<label>
<input type="email" required />Email *
</label>
<label>
<input type="tel" />Phone (optional)
</label>
<label>
<input type="url" />Address (optional)
</label>
</form>
</div>
</body>
</html>Hier werden sowohl :optional als auch :required gemeinsam eingesetzt, damit die beiden Feldtypen leicht voneinander zu unterscheiden sind.
Hinweise und Fallstricke
- Submit-Schaltflächen sind nicht optional. Ein
<button>oder<input type="submit">kann nicht als Pflichtfeld markiert werden und trifft daher niemals auf:optionalzu. Schaltflächen sollten mit einem eigenen Selektor gestaltet werden. - Validierungszustände sind getrennt.
:optionalgibt nur an, ob ein Feld ein Pflichtfeld ist — nicht ob sein Wert gültig ist. Dafür werden:validund:invalidverwendet. - Die Klasse wird live aktualisiert. Wenn man das Attribut
requiredper JavaScript umschaltet, wertet der Browser:optional/:requiredsofort neu aus, sodass die Gestaltung unmittelbar folgt.
Verwandte Pseudo-Klassen
:required— das Gegenteil von:optional.:validund:invalid— treffen auf Elemente zu, je nachdem ob ihr Wert die Validierung besteht.:enabledund:disabled— treffen auf Elemente je nach Interaktivität zu.:read-only— trifft auf Elemente zu, die der Benutzer nicht bearbeiten kann.