Required css: :required — CSS: Cascading Style Sheets

Leave a Comment / Css / By /

:required ⚡️ HTML и CSS с примерами кода

Псевдокласс :required применяет стилевые правила к элементу <input>, у которого установлен атрибут required, он позволяет выделять поля обязательные к заполнению перед отправкой формы.

Псевдоклассы
  • :active
  • :any-link
  • :blank
  • :checked
  • :current()
  • :default
  • :defined
  • :dir()
  • :disabled
  • :empty
  • :enabled
  • :first
  • :first-child
  • :first-of-type
  • :focus
  • :focus-visible
  • :focus-within
  • :fullscreen
  • :future
  • :has()
  • :host
  • :host()
  • :host-context()
  • :hover
  • :indeterminate
  • :in-range
  • :invalid
  • :is()
  • :lang()
  • :last-child
  • :last-of-type
  • :left
  • :link
  • :local-link
  • :not()
  • :nth-child()
  • :nth-col()
  • :nth-last-child()
  • :nth-last-col()
  • :nth-last-of-type()
  • :nth-of-type()
  • :only-child
  • :only-of-type
  • :optional
  • :out-of-range
  • :past
  • :placeholder-shown
  • :read-only
  • :read-write
  • :required
  • :right
  • :root
  • :scope
  • :target
  • :target-within
  • :user-invalid
  • :valid
  • :visited
  • :where()

Синтаксис

input:required {
  /* . .. */
}

Спецификации

  • HTML Living Standard
  • HTML5
  • Selectors Level 4
  • CSS Basic User Interface Module Level 3

Пример

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Комментарии</title>
    <style>
      #comment p {
        margin: 0 0 5px; /* Отступ снизу */
      }
      #comment label {
        width: 110px; /* Ширина текста */
        float: left; /* Выстраиваем по горизонтали */
        text-align: right; /* Текст по правому краю */
        padding-right: 10px; /* Поле справа */
      }
      #comment input[type='text'],
      #comment textarea {
        width: 320px; /* Ширина текстовых полей */
      }
      input:required {
        border: 1px solid red; /* Красная рамка для обязательных полей */
      }
    </style>
  </head>
  <body>
    <form>
      <p>
        <label for="user">Имя</label>
        <input type="text" required />
      </p>
      <p>
        <label for="email">E-mail</label
        ><input type="text" />
      </p>
      <p>
        <label for="text">Комментарий</label>
        <textarea cols="40" rows="10"></textarea>
      </p>
      <p>
        <label>&nbsp;</label
        ><input type="submit" value="Отправить" />
      </p>
    </form>
  </body>
</html>

В данном примере обязательным считается поле для ввода имени, оно выделяется красной рамкой за счёт применения псевдокласса :required. Результат:

См. также

  • :optional
  • :invalid
  • :valid

Ссылки

  • Псевдо-класс :required MDN (рус.)

CSS — Псевдокласс :required

Применяет стилевые правила к элементу <input>, у которого установлен атрибут required. Он позволяет выделять поля обязательные к заполнению перед отправкой формы.

Синтаксис ?

input:required  {  ...  }

✖

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Комментарии</title>
  <style>
   #comment p {
    margin: 0 0 5px; /* Отступ снизу */
   }
   #comment label {
    width: 110px; /* Ширина текста */
    float: left; /* Выстраиваем по горизонтали */
    text-align: right; /* Текст по правому краю */
    padding-right: 10px; /* Поле справа */
   }
   #comment input[type="text"], #comment textarea {
    width: 320px; /* Ширина текстовых полей */
   }
   input:required {
    border: 1px solid red; /* Красная рамка для обязательных полей */
   }
  </style>
 </head>
 <body>
  <form action="handler.
  php">
   <p><label for="user">Имя</label>
      <input type="text" name="user" required></p>
   <p><label for="email">E-mail</label><input name="email" type="text"></p>
   <p><label for="text">Комментарий</label>
      <textarea cols="40" rows="10" name="text"></textarea></p>
   <p><label>&nbsp;</label><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

В данном примере обязательным считается поле для ввода имени, оно выделяется красной рамкой за счёт применения псевдокласса :required. Результат примера в Safari 5 показан на рис. 1.

Рис. 1. Использование псевдокласса :required

Спецификация ?

СпецификацияСтатус
WHATWG HTML Living StandardЖивой стандарт
HTML5Возможная рекомендация
Selectors Level 4Рабочий проект
CSS Basic User Interface Module Level 3Рабочий проект

✖

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры: Настольные Мобильные    

?

Internet ExplorerChromeOperaSafariFirefox
10101054

AndroidFirefox MobileOpera MobileSafari Mobile
44105

✖

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Формы | Псевдоклассы

: требуется | Коддропс

:required — это селектор псевдокласса CSS , используемый для выбора необходимых элементов формы.

В частности, он используется для выбора элементов формы, для которых установлен обязательный атрибут .

Элементы формы, которые можно выбрать с помощью :required : s, <выберите имя = "нм" требуется>

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

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

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





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

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

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

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

Как и другие селекторы псевдоклассов, 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

спросил

Изменено 3 года, 9 месяцев назад

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

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

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

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

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

Но я говорю о том, что если метка и ввод поменяются местами, как в примере ниже, что более распространено. Родственный селектор CSS + в этом случае не работает. Есть ли способ сделать что-то подобное, когда элемент

label является первым, а ввод вторым? 

 /* ??? */ 
 <форма>
  <дел>
<дел> <тип ввода = "текст" />