CSS :enabled-Pseudoklasse

Die CSS-Pseudoklasse :enabled wählt Elemente aus, die aktiviert sind, und formatiert sie.

Bei diesen Elementen handelt es sich in der Regel um Formular-Elemente, wie z. B. Buttons (<button>), Auswahllisten (<select>), Eingabefelder (<input>) und Textbereiche (<textarea>).

Aktivierte Elemente akzeptieren Klicks, Texteingaben oder den Fokus.

Version

HTML Living Standard

HTML5

Selectors Level 4

Syntax

Beispiel für die CSS :enabled-Syntax

css

:enabled {
  css declarations;
}

Beispiel für den :enabled-Selektor:

CSS :enabled-Codebeispiel

html

<!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>

Try it Yourself »

Beispiel für den :enabled-Selektor mit dem `<option>`-Tag:

Ein weiteres CSS :enabled-Codebeispiel

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      option:enabled {
        background: #666;
      }
    </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>

Try it Yourself »

Praxis

Was bewirkt die Pseudoklasse ':enabled' in CSS?

Sie wählt jedes deaktiviert <input>-Element aus.Sie wählt jedes aktiviert <input>-Element aus.Sie wählt jedes <input>-Element aus, über dem sich der Mauszeiger befindet.Sie wendet einen speziellen Stil auf ein Element an, wenn es mit der Maus überfahren wird.Sie wendet einen speziellen Stil auf ein aktiviertes <input>-Element an.

CSS :enabled-Pseudoklasse ​

Version ​

Syntax ​

Beispiel für den :enabled-Selektor: ​