Селектор :required выбирает элементы, которые считаются обязательными.
Селектор :required выбирает элементы form с атрибутом required.
Он применяется только к элементам <input>, <select> и <textarea>.
Версия
CSS3
Синтаксис
:required {
css declarations;
}Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
.example {
margin: 40px auto;
max-width: 400px;
}
label,
button {
display: block;
width: 100%;
margin-bottom: 1.5em;
}
input,
select,
button {
padding: .4em 1em;
}
input,
select {
border: 1px solid #666666;
}
input:optional,
select:optional {
background-color: #eeeeee;
color: #666666;
}
input:required,
textarea:required {
border-bottom: 3px solid #1c87c9;
}
</style>
</head>
<body>
<h2>Пример селектора :required</h2>
<div class="example">
<form action="#">
<label>
<input type="name" required>Имя *
</label>
<label>
<input type="email" required>Email *
</label>
<label>
<input type="phone">Телефон (необязательный)
</label>
<label>
<input type="url">Адрес (необязательный)
</label>
</form>
</div>
</body>
</html>В данном примере использованы селекторы :optional и :required.
Поддержка браузера
|
|
|
|
|
|---|---|---|---|---|
| 10.0+ | 12.0+ | 4.0+ | 10.1+ | 10.0+ |
Практикуйте свои знания
Что такое псевдокласс :required в CSS?
Правильный!
Неправильно!