CSS :in-range Pseudo Classe
A pseudo-classe CSS :in-range seleciona elementos cujo valor está dentro dos limites definidos pelos atributos min e max. Veja exemplos práticos.
A pseudo-classe CSS :in-range corresponde a um elemento <input> cujo valor atual está dentro do intervalo definido pelos seus atributos min e max. Ela permite estilizar um campo de forma diferente enquanto a entrada do utilizador ainda é válida, fornecendo feedback visual imediato sem uma única linha de JavaScript.
Esta página aborda quando :in-range se aplica, os tipos de input com os quais funciona, exemplos práticos de estilização e como se relaciona com as pseudo-classes de validação com as quais é combinada.
Quando o seletor se aplica
:in-range só é relevante para controles de formulário que podem expressar um intervalo. Um controle é limitado por intervalo quando aceita uma restrição min e/ou max. Se um controle não tiver tal restrição, ele não pode ser nem "dentro do intervalo" nem fora do intervalo — portanto nenhuma das pseudo-classes jamais o corresponderá.
:in-range funciona em elementos <input> que suportam min/max: type="number", type="range", type="date", type="month", type="week", type="time" e type="datetime-local". Um input de texto, checkbox ou botão nunca estará dentro do intervalo.
Um campo está dentro do intervalo quando as três condições são verdadeiras:
- o tipo de input suporta
min/max, - pelo menos um de
minoumaxestá definido, - o valor atual está entre os limites (inclusive).
No momento em que o valor ultrapassa um limite, ele deixa de corresponder a :in-range e passa a corresponder a :out-of-range. As duas pseudo-classes são mutuamente exclusivas, por isso se combinam perfeitamente para estilização do tipo "válido vs. inválido".
Sintaxe
:in-range {
/* style declarations */
}Na prática, quase sempre se qualifica com input (ou um seletor mais específico) para que apenas os controles pretendidos sejam afetados:
input:in-range {
border-color: green;
}Estilizando um input dentro do intervalo
O exemplo abaixo contorna um campo numérico enquanto o seu valor permanece entre 1 e 10. Tente alterar o valor para 0 ou 15 no editor: o estilo da borda desaparece porque o campo não está mais dentro do intervalo.
<!DOCTYPE html>
<html>
<head>
<title>:in-range example</title>
<style>
input:in-range {
border: 2px solid #666;
}
</style>
</head>
<body>
<h2>:in-range selector example</h2>
<form>
<input type="number" min="1" max="10" value="5" />
</form>
</body>
</html>Combinando in-range com out-of-range
Como os dois estados nunca se sobrepõem, um padrão comum é estilizar ambos ao mesmo tempo: verde quando válido, vermelho no instante em que o valor sai da faixa permitida.
<!DOCTYPE html>
<html>
<head>
<title>:in-range and :out-of-range</title>
<style>
input:in-range {
border: 2px solid green;
}
input:out-of-range {
border: 2px solid red;
}
</style>
</head>
<body>
<label>Quantity (1–10):</label>
<input type="number" min="1" max="10" value="5" />
</body>
</html>Combinando com outras pseudo-classes
:in-range pode ser encadeada com outras pseudo-classes — por exemplo :hover ou :focus — para refinamento adicional do feedback:
input:in-range:focus {
outline: 2px solid green;
}Notas e particularidades
:in-rangereflete o valor atual, portanto o estilo é atualizado em tempo real enquanto o utilizador digita ou arrasta um controle deslizante.- Um campo vazio com
min/maxé considerado dentro do intervalo (não há valor que viole o limite), por isso combine-o com:requiredcaso um valor vazio deva ser tratado como inválido. minemaxapenas restringem a estilização aqui — ainda são aplicados pelas pseudo-classes de validação nativa como:valide:invalidquando o formulário é enviado.