Псевдокласс :enabled в CSS

Псевдокласс :enabled в CSS выбирает и стилизует элементы, которые находятся в активном (включённом) состоянии.

Обычно это элементы форм, такие как кнопки (<button>), выпадающие списки (<select>), поля ввода (<input>) и текстовые области (<textarea>).

Активные элементы принимают клики, ввод текста или фокус.

Версия

HTML Living Standard

HTML5

Selectors Level 4

Синтаксис

Пример синтаксиса CSS :enabled

css

:enabled {
  css declarations;
}

Пример использования селектора :enabled:

Пример кода CSS :enabled

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 »

Пример использования селектора :enabled с тегом `<option>`:

Ещё один пример кода CSS :enabled

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 »

Практика

Что делает псевдокласс ':enabled' в CSS?

Он выбирает все отключённые элементы <input>.Он выбирает все включённые элементы <input>.Он выбирает все элементы <input>, над которыми находится курсор.Он применяет специальный стиль к элементу при наведении курсора.Он применяет специальный стиль к включённому элементу <input>.

Псевдокласс :enabled в CSS ​

Версия ​

Синтаксис ​

Пример использования селектора :enabled: ​