CSS :disabled Pseudo-Klasse
Mit der :disabled CSS-Pseudo-Klasse deaktivierte Elemente auswählen und gestalten. Erklärung und Beispiele zum Ausprobieren.
Die Pseudo-Klasse :disabled wählt jedes Element aus, das aktuell deaktiviert ist — also ein Element, mit dem der Benutzer nicht interagieren kann. Ein Steuerelement wird deaktiviert, wenn es das HTML-Attribut disabled trägt. Mit :disabled können Sie diesen Steuerelementen ein eigenes „Nicht verwendbar"-Aussehen geben, ohne eine zusätzliche Klasse hinzufügen zu müssen.
![Beispiel der CSS :disabled Pseudo-Klasse](https://api.w3docs.com/uploads/media/default/0001/03/ced1796b1077a7b96196914b14dfc04aa89805ab.png "CSS :disabled Pseudo-Klassen-Beispiel" =420x)
Diese Seite erläutert, was als deaktiviertes Element gilt, die Syntax des Selektors, die Beziehung zwischen :disabled und seinem Gegenteil :enabled, den Unterschied zwischen disabled und readonly sowie eine Reihe von ausführbaren Styling-Beispielen.
Welche Elemente deaktiviert werden können
Nur Elemente, die überhaupt deaktiviert werden können, werden von :disabled erfasst. Dies sind die interaktiven Formularsteuerelemente:
<button><input>(alle Typen)<select>und seine<option>/<optgroup><textarea><fieldset>— das Deaktivieren eines<fieldset>deaktiviert alle darin enthaltenen Steuerelemente
Ein deaktiviertes Steuerelement verhält sich anders als ein normales:
- Es akzeptiert keine Klicks, Texteingaben oder Tastaturfokus.
- Sein Wert wird nicht mit dem Formular übermittelt.
- Es wird vom Browser nicht validiert, sodass
:valid/:invalidnicht darauf zutreffen.
Einfache Textelemente wie <p> oder <div> können nicht deaktiviert werden und treffen daher nie auf :disabled zu.
:disabled vs. :enabled
:disabled und :enabled sind Spiegelbilder voneinander. Jedes Steuerelement, das deaktiviert werden kann, wird zu einem bestimmten Zeitpunkt genau von einem von beiden erfasst: :enabled, wenn es interaktiv ist, :disabled, wenn das Attribut disabled vorhanden ist. Durch das Styling beider Zustände erhält der Benutzer einen klaren visuellen Kontrast zwischen verwendbaren und nicht verwendbaren Steuerelementen.
disabled vs. readonly
Diese beiden Attribute sehen ähnlich aus, sind aber nicht identisch:
disabled | readonly | |
|---|---|---|
| Benutzer kann es fokussieren | Nein | Ja |
| Benutzer kann den Wert bearbeiten | Nein | Nein |
| Wert wird mit dem Formular übermittelt | Nein | Ja |
| Erfasst von | :disabled | :read-only |
Verwenden Sie disabled, um ein Steuerelement vollständig zu deaktivieren; verwenden Sie readonly (siehe :read-only), wenn der Wert sichtbar bleiben und übermittelt, aber nicht bearbeitet werden soll.
Syntax
Allein verwendet, zielt :disabled auf jedes deaktivierte Steuerelement ab. Kombinieren Sie es mit einem Typ- oder Attribut-Selektor, um spezifischer zu sein:
/* every disabled control */
:disabled {
/* css declarations */
}
/* only disabled text inputs */
input[type="text"]:disabled {
background: #ccc;
cursor: not-allowed;
}Beispiel zur Festlegung einer Hintergrundfarbe für ein deaktiviertes <input>-Element:
CSS :disabled code example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
padding: 2px 5px;
margin-bottom: 10px;
border: 1px solid #ccc;
}
input[type=text]:enabled {
background: #eee;
}
input[type=text]:disabled {
background: #ccc;
}
</style>
</head>
<body>
<h2>:disabled selector example for input</h2>
<form action="">
<label for="name">First name:</label>
<input type="text" value="John" id="name" />
<br />
<label for="lastname">Last name:</label>
<input type="text" value="Smith" id="lastname" />
<br />
<label for="country">Country:</label>
<input type="text" disabled="disabled" value="10 High Street" id="country" />
</form>
</body>
</html>Beispiel zur Festlegung einer Hintergrundfarbe für deaktivierte <option>-Elemente:
CSS :disabled another code example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
option:disabled {
background: #8ebf42;
}
</style>
</head>
<body>
<h2>:disabled selector example for option</h2>
<select>
<option value="paris">Paris</option>
<option value="london" disabled>London</option>
<option value="moscow">Moscow</option>
<option value="rome" disabled>Rome</option>
<option value="berlin">Berlin</option>
</select>
</body>
</html>Hinweis: Die Pseudo-Klasse
:disabledhat Vorrang vor:validund:invalid. Deaktivierte Formularelemente werden vom Browser nicht validiert.
Beispiel eines deaktivierten <input>-Elements:
Example of disabled input element
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
width: 60%;
margin: 0;
border: none;
outline: 1px solid lightgrey;
outline-offset: 2px;
}
input:disabled {
background: #cccccc;
cursor: not-allowed;
}
form {
background: #67a6ec;
padding: 1.5em;
max-width: 400px;
width: 100%;
outline: 10px solid rgba(17, 58, 103, 0.6);
}
hr {
visibility: hidden;
}
label {
margin-right: 3%;
text-align: left;
display: inline-block;
width: 35%;
}
</style>
</head>
<body>
<h2>:disabled selector example with styling</h2>
<form action="#">
<label for="name">Enabled Input:</label>
<input type="text" autofocus />
<hr />
<label for="name">Disabled Input:</label>
<input type="text" disabled />
</form>
</body>
</html>Hinweis zur Barrierefreiheit
Da ein deaktiviertes Steuerelement keinen Fokus erhalten kann, überspringen Tastatur- und Screenreader-Benutzer es vollständig und erhalten keine Erklärung warum es nicht verfügbar ist. Verlassen Sie sich nicht allein auf die Ausgräuung — wenn der Grund wichtig ist, fügen Sie einen erläuternden Text in der Nähe hinzu, oder lassen Sie das Steuerelement aktiviert und validieren Sie beim Absenden. Achten Sie außerdem auf ausreichenden Kontrast bei deaktiviertem Text, damit dieser lesbar bleibt.
Verwandte Pseudo-Klassen
:enabled— der entgegengesetzte Zustand: Steuerelemente, mit denen der Benutzer interagieren kann.:read-onlyund:read-write— fürreadonly-Eingaben.:required— Steuerelemente, die ausgefüllt werden müssen.:validund:invalid— Formularvalidierungszustände.:checked— ausgewählte Checkboxen, Radiobuttons und Optionen.:focus— das Element, das aktuell den Tastaturfokus hat.