Pseudoclasse in-range
A pseudoclasse in-range define o estilo
para elementos cujos valores estão
dentro de um intervalo específico. O intervalo de valores
deve ser definido pelos atributos min
e max.
Sintaxe
seletor:in-range {
}
Exemplo
Vamos definir uma cor de fundo azul clara para o input quando
os números inseridos estiverem dentro do intervalo
de 1 a 5. Também definiremos um fundo rosa quando
o valor inserido estiver fora do limite
escolhido:
<form>
<p>Digite um número de 1 a 5</p>
<p>
<input type="number" min="1" max="5" value="1">
</p>
</form>
input:in-range {
background: #C2DDFD;
}
input:out-of-range {
background: #E37D76;
}
:
Veja também
-
a pseudoclasse
:out-of-range,
que define o estilo para elementos cujos valores estão fora do intervalo -
a pseudoclasse
:valid,
que define o estilo para um input onde um valor válido foi inserido -
a pseudoclasse
:invalid,
que define o estilo para um input onde um valor inválido foi inserido
