Pseudo-clase CSS :in-range

La pseudo-clase `:in-range` selecciona todos los elementos cuyo valor se encuentra dentro de un rango especificado. Se aplica a los elementos que admiten atributos de rango. Si esta limitación está ausente, el elemento no puede estar “dentro del rango” o “fuera del rango”. Para más detalles, consulta la pseudo-clase :out-of-range.

La pseudo-clase `:in-range` puede combinarse con otras pseudo-clases (por ejemplo, :hover).

INFO

El selector `:in-range` solo funciona para elementos <input> con los atributos min y/o max, como type="number", type="range" o type="date".

Versión

HTML Living Standard

Selectors Level 4

Sintaxis

Ejemplo de sintaxis de CSS :in-range

css

:in-range {
  css declarations;
}

Ejemplo de la pseudo-clase `:in-range`:

Ejemplo de código CSS :in-range

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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>

Try it Yourself »

Practice

¿Cuál es el propósito de la pseudo-clase :in-range en CSS?

Se utiliza para dar estilo a elementos de entrada con type range cuando el valor actual está entre min y max.Se utiliza para dar estilo a los elementos cuando el cursor del mouse pasa sobre ellos.Se utiliza para dar estilo a elementos de entrada cuando están deshabilitados.Se utiliza para seleccionar y dar estilo a un elemento que tiene un padre específico.Se utiliza para dar estilo a elementos de entrada con type range cuando el valor actual está fuera de min y max.

Pseudo-clase CSS :in-range ​

Versión ​

Sintaxis ​

Ejemplo de la pseudo-clase `:in-range`: ​

Practice ​

Pseudo-clase CSS :in-range

Versión

Sintaxis

Ejemplo de la pseudo-clase `:in-range`:

Practice