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

Примеры

HTML Результат

htmlCodes

<!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"> 
		
		&nbsp;<label for="second">2 вариант</label>
		<input type="checkbox" name="second" value="2" id="second">
		
		&nbsp;<label for="third">3 вариант</label>
		<input type="checkbox" name="third" value="3" id="third"><br><br>
		
		<!--  Цвет надписи будет зеленым, т.к. атрибут «disabled» отсутствует  -->		
		<button type="reset">Сброс</button> &nbsp; 
		
		<!--  Цвет надписи будет красным, т.к. присутствует атрибут «disabled»  -->
		<button type="submit" disabled>Отправить</button>
		
	</form>
	
</body>
</html>

Пример №1