Css required: :required — CSS: Cascading Style Sheets

Элементы формы, которые можно выбрать с помощью :required : s, с и </code> с без обязательного атрибута <code> </code>. </p> <p> Например, с помощью <code> :required </code> можно выбрать следующие элементы формы: </p><pre> <Требуется тип ввода = "имя"> <Тип ввода = "флажок" требуется> <input type="требуется электронная почта"> <textarea name="name" cols="30" rows="10" обязательно> <выберите имя = "нм" требуется>

Следующие элементы формы могут быть выбраны , а не , используя :required , потому что для них не установлен атрибут required :

<тип ввода="текст">

<тип ввода="отправить">





<выбрать имя="нм">
    

                 

:required полезен для стилизации обязательных элементов формы, чтобы привлечь к ним больше визуального внимания, чтобы пользователь знал, что они обязательны и должны быть заполнены.

Общая информация и заметки

Если вы хотите выбрать необязательные элементы формы, вы можете использовать селектор псевдокласса :Optional .

Как и другие селекторы псевдоклассов, 9Селектор 0003 :required может быть связан с другими селекторами, такими как :hover и с псевдоэлементами, такими как ::after , среди прочих. Например, следующее правило предоставит :focus стилей для необходимой текстовой области:

текстовая область: требуется: фокус {
    /* содержимое и стили здесь */
}
                 

Примеры

Следующее применит красную рамку к полю ввода электронной почты. Это поле обычно требуется в контактных формах, чтобы владелец веб-сайта мог ответить тому, кто отправил форму.

ввод [тип = "электронная почта"]: требуется {
    граница: 2px твердый помидор;
}
                 

Следующее применит красный цвет к меткам обязательных полей ввода (если метка идет сразу после ввода в исходном порядке):

ввод: требуется + метка {
    цвет: помидор;
    вес шрифта: полужирный;
}
                 

Живая демонстрация

В следующем демо оба 9Селекторы псевдоклассов 0003 :required и :Optional используются для стилизации необязательных и обязательных элементов формы, соответственно, чтобы требуемые формы выделялись визуально.

Посмотреть эту демонстрацию на игровой площадке Codrops

Служба поддержки браузера

Селектор псевдокласса : необязательный поддерживается в Chrome 10+, Firefox, Safari, Opera 10+, Internet Explorer 10+, а также на Android и iOS.

Дополнительная литература

• Базовый модуль пользовательского интерфейса CSS
• Отключенные элементы — HTML5

Автор Сара Суэйдан. Последнее обновление сделано Маноэлой Илич 3 февраля 2015 г. в 12:33.

У вас есть предложение, вопрос или вы хотите внести свой вклад? Отправить вопрос.

html — добавьте «*» к метке полей ввода с атрибутом «обязательный» с помощью CSS

спросил 5 лет, 2 месяца назад

Изменено 4 года назад

Просмотрено 13 тысяч раз

Мне интересно, есть ли способ, используя только CSS, добавить звездочку к элементу label , когда атрибут label for предназначен для элемента ввода с требуется атрибут html. В качестве альтернативы мы могли бы использовать логику, если за меткой непосредственно следует элемент ввода , который имеет обязательный атрибут .

Работает что-то вроде этого:

 ввод [обязательно] + метка: после {
  содержание: '*';
  красный цвет;
} 

 <форма>
  <дел>
    

Имя