21. :enabled

Przeznaczenie selektora `:enabled`

:enabled { ... }

Selektor :enabled odwołuje się do każdego elementu HTML, którego cechy w danym momencie spełniają zasadę pseudoklasy :enabled.

Cechy elementu HTML spełniają zasadę pseudoklasy :enabled, gdy w danym momencie dany element HTML nie został wyłączony z możliwości interakcji z użytkownikiem (na przykład za pomocą atrybutu disabled).

Informacje techniczne o selektorze `:enabled`

ograniczenie - elementy HTML

element button nieposiadający w danym momencie atrybutu disabled
element fieldset nieposiadający w danym momencie atrybutu disabled
element input nieposiadający w danym momencie atrybutu disabled
element optgroup nieposiadający w danym momencie atrybutu disabled
element option nieposiadający w danym momencie atrybutu disabled
element select nieposiadający w danym momencie atrybutu disabled
element textarea nieposiadający w danym momencie atrybutu disabled
element button, element fieldset, element input, element optgroup, element option, element select lub element textarea, lecz tylko wtedy, gdy któryś z wymienionych elementów HTML znajduje się w zawartości elementu fieldset, który nie posiada w danym momencie atrybutu disabled (zasada ta nie tyczy się elementów HTML, których bliższym elementem przodkiem jest element legend, a nie element fieldset nieposiadający w danym momencie atrybutu disabled)

ograniczenie - właściwości CSS

brak

Przykładowa reguła CSS, selektor `:enabled`

input:enabled {
  background-color:red;
}

Wyjaśnienie przykładowej reguły CSS

input:enabled { background-color:red; }

input:enabled

do każdego elementu input, który nie został wyłączony z możliwości interakcji z użytkownikiem

background-color

dodaj właściwość CSS, która zmieni kolor tła elementu HTML

red

na barwę czerwoną

Kod źródłowy przykładowego dokumentu HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Kurs CSS</title>

    <style>
      input:enabled {
        background-color:red;
      }
    </style>
  </head>

  <body>

    <label>
      Podaj dowolny ciąg znaków: <input type="text">
    </label>

    <hr>

    <label>
      Podaj nazwę koloru: <input type="text" disabled>
    </label>

  </body>
</html>