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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
|
---
title: ':out-of-range'
slug: 'Web/CSS/:out-of-range'
tags:
- CSS
- Layout
- Pseudo-class
- Web
translation_of: 'Web/CSS/:out-of-range'
---
<div>{{CSSRef}}</div>
<p>The <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class </a><a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:out-of-range</code></strong> representa un element {{htmlelement("input")}} el valor actual del qual està fora dels límits de rang especificats pels atributs {{htmlattrxref("min", "input")}} i {{htmlattrxref("max","input")}}.</p>
<pre class="brush: css no-line-numbers">/* <span id="result_box" lang="ca"><span>Selecciona qualsevol</span></span> <input>, <span id="result_box" lang="ca"><span>però només quan té un rang especificat, i el seu valor està fora d'aquest rang</span></span> */
input:out-of-range {
background-color: rgba(255, 0, 0, 0.25);
}</pre>
<p>Aquesta pseudo-class és útil per proporcionar a l'usuari una indicació visual de que el valor actual d'un camp està fora dels límits permesos.</p>
<div class="note"><strong>Nota:</strong> Aquesta pseudo-class només s'aplica als elements que tenen (i poden prendre) una limitació de rang. A falta d'aquesta limitació, l'element no pot ser "dins del rang" ni "fora de rang".</div>
<h2 id="Sintaxi">Sintaxi</h2>
{{csssyntax}}
<h2 id="Example" name="Example">Exemple</h2>
<div id="example">
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><form action="" id="form1">
<ul>Values between 1 and 10 are valid.
<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>
</ul>
</form></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css;">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: 'okay.';
}
input:out-of-range + label::after {
content: 'out of range!';
}</pre>
<h3 id="Resultat">Resultat</h3>
</div>
<div>{{EmbedLiveSample('Example', 600, 140)}}</div>
<h2 id="Especificacions">Especificacions</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificació</th>
<th scope="col">Estat</th>
<th scope="col">Comentari</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>Defineix quan <code>:out-of-range</code> coincideix en elements HTML.</td>
</tr>
<tr>
<td>{{SpecName('CSS4 Selectors', '#out-of-range-pseudo', ':out-of-range')}}</td>
<td>{{Spec2('CSS4 Selectors')}}</td>
<td>Definició inicial.</td>
</tr>
</tbody>
</table>
<h2 id="Navegadors_compatibles">Navegadors compatibles</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Descripció</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Suport en <input></td>
<td>10.0</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("29.0")}}</td>
<td>{{CompatNo()}}</td>
<td>11.0</td>
<td>5.2</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Descripció</th>
<th>Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Suport en <input></td>
<td>2.3</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("16.0")}}</td>
<td>{{CompatNo()}}</td>
<td>{{CompatVersionUnknown()}}</td>
<td>{{CompatVersionUnknown()}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Vegeu_també">Vegeu també</h2>
<ul>
<li>{{cssxref(":in-range")}}</li>
<li><a href="/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation">Validació de dades del formulari</a></li>
</ul>
|
