:enabled

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die :enabled-CSS-Pseudoklasse repräsentiert jedes aktivierte Element. Ein Element ist aktiviert, wenn es aktiviert werden kann (ausgewählt werden, angeklickt werden, Text eingeben usw.) oder den Fokus empfangen kann. Das Element hat auch einen deaktivierten Zustand, in dem es nicht aktiviert werden kann oder keinen Fokus empfangen kann.

Probieren Sie es aus

Syntax

:enabled

Beispiele

Das folgende Beispiel macht die Textfarbe und die Schaltflächen der <input>s grün, wenn sie aktiviert sind, und grau, wenn sie deaktiviert sind. Dies hilft dem Benutzer zu verstehen, mit welchen Elementen interagiert werden 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: #2b2;
}

input:disabled {
  color: #aaa;
}

Ergebnis

Spezifikationen

Specification
HTML
# selector-enabled
Selectors Level 4
# enabled-pseudo

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:enabled

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch