CSS псевдокласс :optional
CSS псевдокласс :optional позволяет выделять поля, необязательные к заполнению перед отправкой формы.
Правила написания CSS-псевдокласса :optional
input:optional { ... }
Пример применения псевдокласса :optional
Проиллюстрируем работу псевдокласса :optional на примере формы регистрации. В ней необязательные поля будут полупрозрачными.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Псевдокласс :optional</title>
<style>
.comment div {
/* Отступ снизу */
margin-bottom: 5px;
}
.comment label {
/* Ширина текста */
width: 50px;
/* Выстраиваем по горизонтали */
float: left;
/* Поле справа */
padding-right: 10px;
}
input[type="text"]:optional {
/* Необязательное поле полупрозрачно */
opacity: 0.5;
}
</style>
</head>
<body>
<form class="comment">
<div>
<label>Имя</label>
<input name="user" type="text" required>
</div>
<div>
<label>E-mail</label>
<input name="email" type="text">
</div>
<div>
<input type="submit" value="Регистрирация">
</div>
</form>
</body>
</html>