:enabled
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Die :enabled CSS Pseudoklasse repräsentiert jedes aktivierte Element. Ein Element ist aktiviert, wenn es aktiviert werden kann (auswählbar, anklickbar, beschreibbar usw.) oder den Fokus akzeptieren kann. Das Element hat auch einen deaktivierten Zustand, in dem es nicht aktiviert werden kann oder keinen Fokus akzeptieren kann.
Probieren Sie es aus
label {
display: block;
margin-top: 1em;
}
*:enabled {
background-color: gold;
}
<form>
<label for="name">Name:</label>
<input id="name" name="name" type="text" />
<label for="emp">Employed:</label>
<select id="emp" name="emp" disabled>
<option>No</option>
<option>Yes</option>
</select>
<label for="empDate">Employment Date:</label>
<input id="empDate" name="empDate" type="date" disabled />
<label for="resume">Resume:</label>
<input id="resume" name="resume" type="file" />
</form>
Syntax
css
:enabled {
/* ... */
}
Beispiele
Das folgende Beispiel ändert die Farbe von Text und <input>-Buttons zu grün, wenn sie aktiviert sind, und zu grau, wenn sie deaktiviert sind. Dies hilft dem Benutzer zu verstehen, mit welchen Elementen er interagieren kann.
HTML
html
<form action="url_of_form">
<label for="FirstField">First field (enabled):</label>
<input type="text" id="FirstField" value="Lorem" /><br />
<label for="SecondField">Second field (disabled):</label>
<input type="text" id="SecondField" value="Ipsum" disabled /><br />
<input type="button" value="Submit" />
</form>
CSS
css
input:enabled {
color: #22bb22;
}
input:disabled {
color: #aaaaaa;
}
Ergebnis
Spezifikationen
| Specification |
|---|
| HTML # selector-enabled |
| Selectors Level 4 # enabled-pseudo |
Browser-Kompatibilität
Loading…