:out-of-range

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

A pseudo classe de CSS :out-of-range representa um elemento de <entrada> cujo valor atual esta fora dos limites especificados pelo min e max atributos

css
/* Selecione qualquer <entrada>, mas somente quando estiver dentros dos
 limites especificados, e quando este valor estiver fora deste limite */
input:out-of-range {
  background-color: rgba(255, 0, 0, 0.25);
}

Essa pseudo classe é muito útil por dar ao usuario uma indicacão visual de que o valor atual esta fora dos limites permitidos

Nota: Esta pseudo classe se aplica somente a elementos que tem (ou podem ter) uma limitacao. Na falta dessa de algo como essa limitacao, o elemento nao tera como ficar "in-range"(dentro dos limites) ou "out-of-range" (fora dos limites).

Sintaxe

Error: could not find syntax for this item

Exemplo

HTML

html
<form action="" id="form1">
  <p>Valores entre 1 e 10 são validos.</p>
  <ul>
    <li>
      <input
        id="value1"
        name="value1"
        type="number"
        placeholder="1 to 10"
        min="1"
        max="10"
        value="12" />
      <label for="value1">Seu valor está </label>
    </li>
  </ul>
</form>

CSS

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: "dentro dos limites.";
}

input:out-of-range + label::after {
  content: "Fora dos limites!";
}

Resultado

Specifications

Specification
HTML
# selector-out-of-range
Selectors Level 4
# out-of-range-pseudo

Compatibilidade com navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:out-of-range

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also