Псевдокласс :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>Поддержка браузера
|
|
|
|
|
|---|---|---|---|---|
| 4.0+ | 12.0+ | 3.5+ | 3.2+ | 10.0+ |
Практикуйте свои знания
What is the purpose of the :enabled pseudo-class in CSS?
Правильный!
Неправильно!