:valid
Baseline
Widely available
This feature is well established and works across many devices and browser versions. Itâs been available across browsers since иÑÐ»Ñ 2015 г..
ÐпиÑание
CSS пÑевдоклаÑÑ :valid наÑ
Ð¾Ð´Ð¸Ñ Ð»ÑбÑе <input> или <form> ÑлеменÑÑ, конÑÐµÐ½Ñ ÐºÐ¾ÑоÑÑÑ
валиден, в ÑооÑвеÑÑÑвии Ñ Ñипом полÑ. Ðн позволÑÐµÑ Ð²Ð°Ð¼ легко менÑÑÑ Ð²Ð½ÐµÑний вид полей, ÑÑо Ð¿Ð¾Ð¼Ð¾Ð³Ð°ÐµÑ Ð¿Ð¾Ð½ÑÑÑ Ð¿Ð¾Ð»ÑзоваÑелÑ, ÑÑо он ввÑл даннÑе пÑавилÑно.
ÐÑимеÑ
ÐÑÐ¾Ñ Ð¿ÑÐ¸Ð¼ÐµÑ Ð¿ÑедÑÑавлÑÐµÑ Ñобой пÑоÑÑÑÑ ÑоÑмÑ, ÑвеÑа ÑлеменÑов коÑоÑой зелÑнÑе, когда даннÑе коÑÑекÑнÑе, и кÑаÑнÑе, когда неÑ.
HTML
<form>
<label>ÐведиÑе URL:</label>
<input type="url" />
<br />
<br />
<label>ÐведиÑе адÑÐµÑ Ñл. поÑÑÑ:</label>
<input type="email" required />
</form>
CSS
input:invalid {
background-color: #ffdddd;
}
form:invalid {
border: 5px solid #ffdddd;
}
input:valid {
background-color: #ddffdd;
}
form:valid {
border: 5px solid #ddffdd;
}
input:required {
border-color: #800000;
border-width: 3px;
}
СпеÑиÑикаÑии
| Specification |
|---|
| HTML # selector-valid |
| Selectors Level 4 # valid-pseudo |