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

Псевдокласс :enabled используется для применения стиля к к доступным (не заблокированным) элементам форм.

Такими элементами могут быть кнопки (<button>), меню выбора (<select>), тип вводимых данных (<input>) и текстовая область (<textarea>).

Такие элементы можно сфокусировать или активировать.

Версия

CSS3

Синтаксис

:enabled {
css declarations;
}

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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</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>

Рассмотрим другой пример:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      option:enabled {
      background: #666;
      }
    </style>
  </head>
  <body>
    <h2>Пример селектора :enabled</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>

Поддержка браузера

chrome edge firefox safari opera
4.0+ 12.0+ 3.5+ 3.2+ 10.0+

Практикуйте свои знания

What is the purpose of the :enabled pseudo-class in CSS?
Считаете ли это полезным?