English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
in-El pseudo-clase de CSS range representa un elemento <input> whose current value is within the range specified by the attributes min and max. Nota: Este pseudo-clase solo se aplica a aquellos elementos que tienen (o pueden aceptar) un rango de valores establecido. Si falta esta configuración, el valor del elemento no tiene sentido en "in-range” y “out-range”.
Manual de referencia de selectores CSS completos
Establecer el estilo especificado cuando el valor ingresado está dentro del rango especificado:
<!DOCTYPE html>
<html
><head
<meta charset="utf-8">
<title> Tutoriales básicos (oldtoolbag.com)</title>/><title
<style
input:in-rango
{
borde:2px sólido naranja;
}
</><style
</><head
<body
<h3>:in-Ejemplo de selector de rango de CSS./h3>
<input type="number" min="8" max="18" valor="9" />
<p>Ingrese un valor en el input (menor que 8 o 18), ver los cambios en el estilo.</p>
</body>
</html>Prueba a ver ‹/›:in-El selector de rango se utiliza para definir el estilo de etiquetas cuando el valor está dentro de un rango especificado.
Nota: :in-El selector de rango solo actúa sobre elementos que pueden especificar valores de intervalo, como los atributos min y max de un elemento <input>.
Los números en la tabla indican la versión del primer navegador que admite la propiedad.
| Selector | |||||
|---|---|---|---|---|---|
| :in-rango | 10.0 | No se admite | 28.0 | 5.2 | 11.0 |
/* Este pseudo-clase puede seleccionar cualquier <input>, pero solo es efectivo si el elemento especifica un rango de valores y el valor del elemento está dentro de ese rango.*/
input:in-rango {
fondo-color: rgba(0, 255, 0, 0.25);
}Este pseudo-clase proporciona una sugerencia visual al usuario, indicando que el valor actual del campo de entrada se encuentra dentro del rango permitido.
Selector de CSS :out-de-rango