---
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="Пример" name="Пример">Пример</h2>

<div id="example">
<h3 id="HTML">HTML</h3>

<pre class="brush: html; highlight:[3]">&lt;form action="" id="form1"&gt;
    &lt;ul&gt;Приминаются значения между 1 и 10.
        &lt;li&gt;
            &lt;input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12"&gt;
            &lt;label for="value1"&gt;Your value is &lt;/label&gt;
        &lt;/li&gt;
&lt;/form&gt;</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>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Возможность</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Поддержка &lt;input&gt;</td>
   <td>10.0</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>Возможность</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Поддержка &lt;input&gt;</td>
   <td>2.3</td>
   <td>{{CompatGeckoMobile("16.0")}}</td>
   <td>{{CompatNo()}}</td>
   <td>{{CompatVersionUnknown()}}</td>
   <td>{{CompatVersionUnknown()}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li>{{cssxref(":in-range")}}</li>
 <li><a href="/ru/docs/Web/Guide/HTML/Forms/Data_form_validation">Руководство валидации данных в формах</a></li>
</ul>