CSS :: Псевдокласс :enabled
Псевдокласс :enabled
(от англ. enabled – доступный, разрешенный)
позволяет выбрать все элементы формы требуемого типа, у которых атрибут disabled отсутствует
(элемент доступен), например, button:enabled {блок объявлений}
.
Селектор псевдоклассов напоминает селектор классов, но в отличие от классов, псевдоклассы в разметке html-документа не указываются и отделяются от указанного в селекторе элемента двоеточием «:». При этом выбираются элементы необходимого типа, которые соответствуют требованиям указанного в селекторе псевдокласса.
Синтаксис
<селектор>:enabled {блок объявлений}
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/selectors-4/#enableddisabled
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/:enabled
Примеры
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> /* Выбранное окошко выделим оранжевой рамкой */ input:checked{ outline: 3px; outline-color: orange; outline-style: solid; } button:enabled{ color: green; } button:disabled{ color: red; } </style> </head> <body> <form action="http://localhost/test/php/script_1.php" method="POST"> <label for="first">1 вариант</label> <input type="checkbox" checked name="first" value="1" id="first"> <label for="second">2 вариант</label> <input type="checkbox" name="second" value="2" id="second"> <label for="third">3 вариант</label> <input type="checkbox" name="third" value="3" id="third"><br><br> <!-- Цвет надписи будет зеленым, т.к. атрибут «disabled» отсутствует --> <button type="reset">Сброс</button> <!-- Цвет надписи будет красным, т.к. присутствует атрибут «disabled» --> <button type="submit" disabled>Отправить</button> </form> </body> </html>
Пример №1