---
title: ':out-of-range'
slug: 'Web/CSS/:out-of-range'
tags:
  - CSS
  - CSS Pseudoklasse
  - Layout
  - Referenz
  - Web
translation_of: 'Web/CSS/:out-of-range'
---
<div>{{CSSRef}}</div>

<div> </div>

<h2 id="Übersicht">Übersicht</h2>

<p>Die <code>:out-of-range</code> CSS <a href="/de/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">Pseudoklasse</a> passt, wenn das value Attribut eines Elements außerhalb der angegebenen Begrenzungen für dieses Element ist. Sie erlaubt der Seite, darauf zu reagieren, dass der aktuell definierte Wert eines Elements außerhalb der Bereichsgrenzen ist. Ein Wert kann außerhalb eines Bereichs sein, wenn er entweder kleiner oder größer als die gesetzten Minimal- und Maximalwerte ist.</p>

<div class="note"><strong>Hinweis:</strong> Diese Pseudoklasse trifft nur auf Elemente zu, die Bereichsbegrenzungen haben. Falls keine solchen Begrenzungen existieren, kann der Wert des Elements weder innerhalb noch außerhalb der Grenzen liegen.</div>

<h2 id="Beispiel">Beispiel</h2>

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

<pre class="brush: html; highlight:[3]">&lt;form action="" id="form1"&gt;
    &lt;ul&gt;Werte zwischen 1 und 10 sind gültig.
        &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;Der Wert ist &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:' OK';
}
input:out-of-range + label::after {
    content:'out of range!';
}</pre>
</div>

<div>{{EmbedLiveSample('Beispielcode',600,140)}}</div>

<h2 id="Spezifikation"><span>Spezifikation</span></h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Selectors', '#in-range-pseudo', ':in-range')}}</td>
   <td>{{Spec2('CSS4 Selectors')}}</td>
   <td>Keine Änderung</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Basic UI', '#pseudo-range', ':in-range')}}</td>
   <td>{{Spec2('CSS3 Basic UI')}}</td>
   <td>Ursprüngliche Spezifikation</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>

{{Compat("css.selectors.out-of-range")}}

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li>Link bezogene Pseudoklassen: {{cssxref(":link")}}, {{cssxref(":visited")}}, and {{cssxref(":hover")}}.</li>
 <li><a href="/de/docs/Web/Guide/HTML/Forms/Datenformular_Validierungsguide">Datenformular Validierungsguide</a></li>
</ul>