1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
---
title: ':out-of-range'
slug: 'Web/CSS/:out-of-range'
tags:
- CSS
- Псевдоклассы
- Руководство
translation_of: 'Web/CSS/:out-of-range'
---
<div>{{CSSRef}}</div>
<div></div>
<h2 id="Summary">Summary</h2>
<p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдокласс</a> <code>:out-of-range</code> находит элементы, значение которых находится вне диапазона их ограничений. Он позволяет странице показывать, когда значение элемента находится вне допустимого диапазона. Значение будет вне диапазона, если оно меньше или больше, чем минимальное и максимальное значения.</p>
<div class="note"><strong>Замечание:</strong> этот псевдокласс применяется только к элементам с заданным диапазоном ограничений. При отсутствии такого ограничения, элемент не может быть ни "в зоне допустимых значений", ни "вне диапазона".</div>
<h2 id="Пример">Пример</h2>
<div id="example">
<h3 id="HTML">HTML</h3>
<pre class="brush: html; highlight:[3]"><form action="" id="form1">
<ul>Приминаются значения между 1 и 10.
<li>
<input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12">
<label for="value1">Your value is </label>
</li>
</form></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css; highlight:[5]">li {
list-style: none;
margin-bottom: 1em;
}
input {
border: 1px solid black;
}
input:in-range {
background-color: rgba(0, 255, 0, 0.25);
}
input:out-of-range {
background-color: rgba(255, 0, 0, 0.25);
border: 2px solid red;
}
input:in-range + label::after {
content:' НОРМАЛЬНОЕ';
}
input:out-of-range + label::after {
content:'вне диапазона!';
}</pre>
</div>
<div>{{EmbedLiveSample('Пример',600,140)}}</div>
<div></div>
<h2 id="Спецификации"><span>Спецификации</span></h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Спецификация</th>
<th scope="col">Статус</th>
<th scope="col">Комментарий</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'scripting.html#selector-out-of-range', ':out-of-range')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>Определяет, когда <code>:out-of-range</code> находит элементы в HTML.</td>
</tr>
<tr>
<td>{{SpecName('CSS4 Selectors', '#out-of-range-pseudo', ':out-of-range')}}</td>
<td>{{Spec2('CSS4 Selectors')}}</td>
<td>Изначальное определение.</td>
</tr>
</tbody>
</table>
<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
<p>{{Compat("css.selectors.out-of-range")}}</p>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li>{{cssxref(":in-range")}}</li>
<li><a href="/ru/docs/Web/Guide/HTML/Forms/Data_form_validation">Руководство валидации данных в формах</a></li>
</ul>
|
