manual de referência do CSS

regra do CSS (RULES)

大全 de atributos do CSS

Funções CSS Manual Completo de Seletores CSS

CSS :in-Seletor range

in-O pseudo-classe range CSS representa um elemento input cujo valor atual está dentro do intervalo definido pelos atributos min e max. Nota: este pseudo-classe é aplicável apenas aos elementos que possuem (ou podem aceitar) uma configuração de intervalo de valores. Sem essa configuração, o valor do elemento não tem significado “in-range” e “out-range”.

Manual completo de seletores CSS

Exemplo online

Defina estilos quando o valor inserido estiver dentro do intervalo especificado:

Exemplo

<!DOCTYPE html>
<html
><head
<meta charset="utf-8">　
<title>Tutorial básico(oldtoolbag.com)</title/><title　
<style
input:in-range
{
　　　　border:2px sólido laranja;
}
</><style
</><head
<body
<h3>:in-Exemplo de seletor range.</h/h3>
<input type="number" min="8" max="18" value="9"　/>
<p>Insira um valor no input (menor　8　ou maior　18), verifique as mudanças no estilo.</p>
</body>
</html>

Teste e veja ‹/›

Definição e uso

:in-O seletor range é usado para estilos exibidos quando o valor do rótulo está dentro do intervalo especificado.

Atenção: 　:in-O seletor range atua apenas em elementos que podem especificar intervalos de valores, como os atributos min e max de um elemento input.

Compatibilidade do navegador

Os números na tabela representam a primeira versão do navegador que suporta essa propriedade.

Seletor
:in-range	10.0	Não suportado	28.0	5.2	11.0

Sintaxe CSS

/*　Este pseudo-classe pode selecionar qualquer <input>, mas é eficaz apenas quando o elemento especifica um intervalo de valores e o valor do elemento está dentro do intervalo especificado.*/
input:in-range {
　　background-color: rgba(0,　255, 0, 0.25);
}

Este pseudo-classe oferece uma dica visual ao usuário, indicando que o valor atual do campo de entrada está dentro do intervalo permitido.

Páginas relacionadas

Seletor CSS :out-de-range

Manual completo de seletores CSS

Funções CSS Manual Completo de Seletores CSS