:out-of-range

Esta tradução está incompleta. Ajude a traduzir este artigo em inglês

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

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

:out-of-range

Exemplo

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

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 Status Comment
HTML Living Standard
The definition of ':out-of-range' in that specification.
Padrão em tempo real Define quando :out-of-range se iguala aos elementos em HTML.
Selectors Level 4
The definition of ':out-of-range' in that specification.
Rascunho atual Definicao inicial.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
:out-of-rangeChrome Full support 10Edge Full support 13Firefox Full support 29IE No support NoOpera Full support 11Safari Full support 5.1WebView Android Full support 2.3Chrome Android Full support 18Firefox Android Full support 16Opera Android Full support 11Safari iOS Full support 5Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
No support  
No support

See also