CSS :enabled Pseudo-Klasse
Die CSS :enabled Pseudo-Klasse zum Auswählen und Gestalten aktivierter Elemente – mit Erklärung und praktischen Beispielen.
Die CSS :enabled Pseudo-Klasse trifft auf jedes Formularelement zu, das aktuell aktiviert ist — das heißt, es kann betätigt (geklickt, mit Text gefüllt oder fokussiert) werden und Benutzereingaben empfangen. Sie ist das direkte Gegenstück zu :disabled.
Ein Element gilt als „aktiviert", wenn es zu den Elementen gehört, die einen disabled-Zustand unterstützen, und wenn das disabled-Attribut nicht gesetzt ist. Diese Seite erklärt, wann :enabled greift, welche Elemente es betrifft, häufige Fallstricke und zwei praktische Beispiele.
Welche Elemente aktiviert sein können
:enabled zielt nur auf Elemente ab, die tatsächlich deaktiviert werden können. Das sind die interaktiven Formularsteuerelemente:
<button><input>(alle Typen)<select><textarea><option><optgroup><fieldset>
Ein <div>, <p> oder ein Link kann in diesem Sinne niemals „aktiviert" oder „deaktiviert" sein, daher trifft :enabled auf sie niemals zu — auch wenn sie interaktiv sind.
Wozu es verwendet wird
Standardmäßig sieht ein aktiviertes Steuerelement bereits aktiv aus, daher wird :enabled selten allein benötigt. Es ist nützlich, wenn ein klarer visueller Unterschied zwischen verwendbaren und nicht verwendbaren Steuerelementen gewünscht wird — beispielsweise um Felder, die der Benutzer ausfüllen kann, hervorzuheben, während :disabled die nicht verfügbaren Felder grau darstellt. Das Kombinieren beider Pseudo-Klassen macht die Interaktivität eines Formulars auf einen Blick erkennbar.
Dinge, auf die man achten sollte
- Standardzustand. Da Steuerelemente standardmäßig aktiviert sind, trifft
:enabledauf sie zu, solange dasdisabled-Attribut nicht explizit gesetzt ist. Das Setzen vondisabledin HTML oder per JavaScript (element.disabled = true) wechselt ein Element von:enabledzu:disabled. <fieldset disabled>kaskadiert. Das Deaktivieren eines<fieldset>deaktiviert alle darin enthaltenen Steuerelemente, sodass diese Kindelemente:enablednicht mehr erfüllen — auch ohne eigenesdisabled-Attribut.- Schreibgeschützt ist nicht deaktiviert. Ein
<input readonly>ist weiterhin aktiviert — es trifft auf:enabledzu, nicht auf:disabled. Für die Gestaltung schreibgeschützter Elemente wird:read-onlyverwendet.
Version
Syntax
CSS :enabled Syntaxbeispiel
:enabled {
css declarations;
}Beispiel des :enabled-Selektors:
CSS :enabled Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
border: 1px solid #ccc;
margin-bottom: 10px;
padding: 2px 5px;
}
input[type=text]:enabled {
background: #eee;
}
input[type=text]:disabled {
background: #ccc;
}
</style>
</head>
<body>
<h2>:enabled selector example</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 des :enabled-Selektors mit dem <option>-Tag:
CSS :enabled weiteres Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
option:enabled {
background: #d4f7d4;
color: #064;
}
option:disabled {
background: #f0f0f0;
color: #aaa;
}
</style>
</head>
<body>
<h2>:enabled selector example</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>Zu beachten ist, dass Browser die Möglichkeiten zur Neugestaltung eines <select> und seiner <option>-Elemente einschränken, sodass die genaue Darstellung dieser Farben je nach Browser und Betriebssystem variiert.
Browser-Unterstützung
Die :enabled Pseudo-Klasse wird von allen modernen Browsern unterstützt, einschließlich Chrome, Firefox, Safari und Edge.
Verwandte Pseudo-Klassen
:disabled— das Gegenteil von:enabled; trifft auf Steuerelemente zu, die nicht verwendet werden können.:read-only— trifft auf Steuerelemente zu, die der Benutzer nicht bearbeiten kann (Hinweis: diese sind weiterhin:enabled).:checked— trifft auf ausgewählte Checkboxen, Radiobuttons und Optionen zu.:required— trifft auf Formularsteuerelemente zu, die ausgefüllt werden müssen.:focus— trifft auf das Steuerelement zu, das aktuell den Tastaturfokus hat.