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

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

Синтаксис

cssселектор:optional {

}

Пример

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

html<form>
  <p>
    <label>Enter number</label>
    <input type="number" required>
  </p>
  <p>
    <label>Enter text</label>
    <input type="text">
  </p>
</form>
cssinput:optional {
  background-color: #D8DFE8;
}

Результат:

Смотрите также

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