mozilla

Revision 531721 of :out-of-range

  • Revision slug: Web/CSS/:out-of-range
  • Revision title: :out-of-range
  • Revision id: 531721
  • Created:
  • Creator: FredB
  • Is current revision? Yes
  • Comment

Revision Content

{{CSSRef}}
 

Summary

The :out-of-range CSS pseudo-class matches when an element has its value attribute outside the specified range limitations for this element. It allows the page to give a feedback that the value currently defined using the element is outside the range limits. A value can be outside of a range if it is either smaller or larger than maximum and minimum set values.

Note: this pseudo-class only applies to elements that have a range limitations. In absence of such a limitation, the element can neither be 'in-range' nor 'out-of-range'.

Example

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>
</form>

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:' OK';
}
input:out-of-range + label::after {
    content:'out of range!';
}
{{EmbedLiveSample('example',600,140)}}
 

Specifications

Specification Status Comment
{{SpecName('CSS4 Selectors', '#in-range-pseudo', ':in-range')}} {{Spec2('CSS4 Selectors')}} No change.
{{SpecName('CSS3 Basic UI', '#pseudo-range', ':in-range')}} {{Spec2('CSS3 Basic UI')}} Initial specification.

Browser compatibility

{{CompatibilityTable}}
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support on <input> 10.0 {{CompatGeckoDesktop("28.0")}} {{CompatNo()}} 11.0 5.2
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support on <input> 2.3 {{CompatGeckoMobile("16.0")}} {{CompatNo()}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}}

See also

  • Link-related pseudo-classes: {{cssxref(":link")}}, {{cssxref(":visited")}}, and {{cssxref(":hover")}}.
  • Data form validation guide

Revision Source

<div>
 {{CSSRef}}</div>
<div>
 &nbsp;</div>
<h2 id="Summary">Summary</h2>
<p>The <code>:out-of-range</code> CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a> matches when an element has its value attribute outside the specified range limitations for this element. It allows the page to give a feedback that the value currently defined using the element is outside the range limits. A value can be outside of a range if it is either smaller or larger than maximum and minimum set values.</p>
<div class="note">
 <strong>Note:</strong> this pseudo-class only applies to elements that have a range limitations. In absence of such a limitation, the element can neither be 'in-range' nor 'out-of-range'.</div>
<h2 id="Example" name="Example">Example</h2>
<div id="example">
 <h3 id="HTML">HTML</h3>
 <pre class="brush: html; highlight:[3]">
&lt;form action="" id="form1"&gt;
&nbsp;&nbsp;&nbsp; &lt;ul&gt;Values between 1 and 10 are valid.
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;label for="value1"&gt;Your value is &lt;/label&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/li&gt;
&lt;/form&gt;</pre>
 <h3 id="CSS">CSS</h3>
 <pre class="brush: css; highlight:[5]">
li {
&nbsp;&nbsp;&nbsp; list-style: none;
&nbsp;&nbsp;&nbsp; margin-bottom: 1em;
}
input {
&nbsp;&nbsp;&nbsp; border: 1px solid black;
}
input:in-range {
&nbsp;&nbsp;&nbsp; background-color: rgba(0, 255, 0, 0.25);
}
input:out-of-range {
&nbsp;&nbsp;&nbsp; background-color: rgba(255, 0, 0, 0.25);
&nbsp;&nbsp;&nbsp; border: 2px solid red;
}
input:in-range + label::after {
&nbsp;&nbsp;&nbsp; content:' OK';
}
input:out-of-range + label::after {
&nbsp;&nbsp;&nbsp; content:'out of range!';
}</pre>
</div>
<div>
 {{EmbedLiveSample('example',600,140)}}</div>
<div>
 &nbsp;</div>
<h2 id="Specifications"><span>Specifications</span></h2>
<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Selectors', '#in-range-pseudo', ':in-range')}}</td>
   <td>{{Spec2('CSS4 Selectors')}}</td>
   <td>No change.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Basic UI', '#pseudo-range', ':in-range')}}</td>
   <td>{{Spec2('CSS3 Basic UI')}}</td>
   <td>Initial specification.</td>
  </tr>
 </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<div>
 {{CompatibilityTable}}</div>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Chrome</th>
    <th>Firefox (Gecko)</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari</th>
   </tr>
   <tr>
    <td>Support on &lt;input&gt;</td>
    <td>10.0</td>
    <td>{{CompatGeckoDesktop("28.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>Feature</th>
    <th>Android</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>IE Mobile</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Support on &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="See_also">See also</h2>
<ul>
 <li>Link-related pseudo-classes: {{cssxref(":link")}}, {{cssxref(":visited")}}, and {{cssxref(":hover")}}.</li>
 <li><a href="/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation">Data form validation guide</a></li>
</ul>
Revert to this revision