: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, angeklickt, eingegeben, etc.) oder den Fokus akzeptiert. Das Element hat auch einen deaktivierten Zustand, in dem es nicht aktiviert werden kann oder den Fokus nicht akzeptiert.

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

:enabled

Beispiele

Im folgenden Beispiel wird die Farbe von Text und <input>-Buttons grün, wenn sie aktiviert sind, und grau, wenn sie deaktiviert sind. Dies hilft dem Benutzer zu verstehen, welche Elemente interagiert werden können.

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

BCD tables only load in the browser

Siehe auch

:disabled