Псевдокласс optional

Псевдокласс optional задает стиль инпуту, у которого не задан атрибут required, т.е. данный псевдокласс применяется к необязательным инпутам.

Синтаксис

селектор:optional {

}

Давайте зададим необязательному инпуту серый фон:

<form>
	<p>
		<label>Enter number</label>
		<input type="number" required>
	</p>
	<p>
		<label>Enter text</label>
		<input type="text">
	</p>
</form>

input:optional {
	background-color: #D8DFE8;
}

псевдокласс :default,
который задает стиль элементам по умолчанию
псевдокласс :indeterminate,
который задает стиль переключателям, которые находятся в неопределенном состоянии
псевдокласс :placeholder-shown,
который задает стиль элементам при отображении текста-подсказки
псевдокласс :read-only,
который задает стиль инпутам, недоступным для изменения
псевдокласс :required,
который задает стиль инпуту, у которого задан атрибут required
псевдокласс :focus-within,
который задает стиль элементам в фокусе
свойство caret-color,
которое задает цвет текстовому курсору в инпуте