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

Псевдокласс :default (от англ. :default – по умолчанию) позволяет выбрать все элементы формы требуемого типа, используемые по умолчанию в группе похожих элементов, например, button:default {блок объявлений}. Данный класс имеет смысл использовать для следующих элементов с множественным выбором: <button>, <input type="checkbox">, <input type="radio"> и <option> .

Селектор псевдоклассов напоминает селектор классов, но в отличие от классов, псевдоклассы в разметке html-документа не указываются и отделяются от указанного в селекторе элемента двоеточием «:». При этом выбираются элементы необходимого типа, которые соответствуют требованиям указанного в селекторе псевдокласса.

Синтаксис

<селектор>:default {блок объявлений}

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/selectors-4/#default-pseudo

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/:default

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
		
		/* Обязательное поле выделим красной рамкой */
		input:required{
		outline: 3px;
		outline-color: red;
		outline-style: solid;	
		}
					
		/* Необязательное поле выделим оранжевой рамкой */
		input:optional{
		outline: 3px;
		outline-color: orange;
		outline-style: solid;	
		}

		button:default{
		color: green;
		border: 1px solid blue;				 
		}

	</style>
	
</head>
<body>

	<form action="http://localhost/test/php/script_1.php" method="POST">
		
		<label for="first_name">Имя: </label> &nbsp; 
		<input type="text" name="first_name" id="first_name" required><br><br> 
		
		<label for="second_name">Фамилия: </label> &nbsp; 
		<input type="text" name="second_name" id="second_name"><br><br>
		
		<button type="reset">Сброс</button> &nbsp; 
		
		<!-- Цвет надписи будет зеленым, а граница синей, т.к. -->
		<!-- из двух кнопок данная используется по умолчанию -->		
		<button type="submit" disabled>Отправить</button>
		
	</form>
	
</body>
</html>

Пример №1