CSS :out-of-range Pseudo Classe
A pseudo-classe CSS :out-of-range seleciona elementos com valor fora do intervalo definido pelos atributos min e max. Veja exemplos práticos.
A pseudo-classe CSS :out-of-range corresponde a um campo de formulário cujo valor atual está fora do intervalo permitido definido pelos atributos min e/ou max. Ela permite fornecer ao utilizador um feedback visual imediato — uma borda vermelha, uma cor de aviso, uma mensagem de dica — no momento em que ele digita um número muito baixo ou muito alto, sem precisar de JavaScript.
Esta página explica exatamente a quais elementos :out-of-range se aplica, como ela difere de :in-range e :invalid, e apresenta exemplos executáveis que pode copiar.
:out-of-range apenas corresponde a elementos <input> que possuem um atributo min e/ou max e suportam restrições de intervalo — ou seja, type="number", type="range" e os tipos de data/hora (date, month, week, time, datetime-local). Em qualquer outro input, ela nunca corresponde.
Quando a pseudo-classe corresponde
Um input é considerado "fora do intervalo" quando todas as seguintes condições são verdadeiras:
- Possui um atributo
mine/oumax. - Contém atualmente um valor que o navegador consegue interpretar.
- Esse valor é menor que
minou maior quemax.
Algumas consequências importantes a ter em mente:
- Campos vazios nunca correspondem. Sem valor, não há nada a comparar, por isso
:out-of-rangeéfalse(e:in-rangetambém éfalse). - Trata-se exclusivamente do intervalo numérico/de data. Uma incompatibilidade de
step(por exemplo1.5quandostep="1") torna o input:invalid, mas não o torna:out-of-range. - A pseudo-classe é atualizada em tempo real à medida que o utilizador edita o campo, pelo que os estilos mudam instantaneamente.
Versão
Sintaxe
:out-of-range {
/* css declarations */
}Quase sempre é conveniente combiná-la com o tipo de input para maior clareza:
input:out-of-range {
border: 3px solid #d9534f;
}Exemplo do seletor :out-of-range
O input abaixo aceita meses de 1 a 12, mas começa com o valor 15, por isso a borda fica destacada ao carregar. Altere o valor para algo entre 1 e 12 e o destaque desaparece.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input:out-of-range {
border: 3px solid #8ebf42;
}
</style>
</head>
<body>
<h2>:out-of-range selector example</h2>
<form>
<input type="number" min="1" max="12" value="15" />
</form>
</body>
</html>Combinando :out-of-range com :in-range
:out-of-range e :in-range são opostos: no máximo um deles corresponde de cada vez, e nenhum corresponde a um input vazio. Estilizar ambos cria uma interface completa de "valor válido / valor inválido":
<!DOCTYPE html>
<html>
<head>
<title>In-range and out-of-range</title>
<style>
input:in-range {
border: 2px solid #2e8b57;
}
input:out-of-range {
border: 2px solid #d9534f;
background-color: #fde9e9;
}
</style>
</head>
<body>
<label>Pick a quantity (1–10):</label>
<input type="number" min="1" max="10" value="25" />
</body>
</html>:out-of-range vs :invalid
Estas duas pseudo-classes são frequentemente confundidas. :invalid é a regra mais abrangente — ela corresponde a qualquer restrição falhada, incluindo um valor required em falta, um e-mail mal formatado ou uma incompatibilidade de step. :out-of-range é mais restrita: apenas é ativada quando um valor está abaixo de min ou acima de max.
Um valor fora do intervalo também é inválido, por isso :invalid também irá correspondê-lo. Use :out-of-range quando quiser especificamente informar o utilizador que "esse número é demasiado grande/pequeno", em vez de uma mensagem de erro genérica. Consulte :invalid e :valid para as pseudo-classes de validação mais abrangentes.
:out-of-range estiliza o campo, mas não impede o envio do formulário por si só. Combine-a com a validação nativa (o navegador bloqueia o envio de um valor fora do intervalo quando min/max estão definidos) ou com verificações do lado do servidor. Nunca confie apenas no CSS para garantir a integridade dos dados.
Pseudo-classes relacionadas
:in-range— o oposto deste seletor.:valide:invalid— correspondem à validade geral de um controlo de formulário.:requirede:optional— correspondem com base no atributorequired.