manual de referencia CSS

reglas @CSS (RULES)

大全 de propiedades CSS

Funciones CSS (Functions)Manual completo de selectores CSS

CSS :out-de-Selector rango

:out-de-El pseudo-clase CSS rango representa un elemento <input> cuyo valor actual está fuera del rango definido por los atributos min y max. Nota: Este pseudo-clase solo es aplicable a aquellos elementos que tienen (o pueden aceptar) un rango de valores configurado. Si falta esta configuración, el valor del elemento no tiene sentido en 'in'-rango y out-rango

Manual de referencia de selector CSS completo

Ejemplo en línea

Establece el estilo especificado cuando el valor ingresado está fuera del rango especificado:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<título> Tutoriales básicos (oldtoolbag.com)</título>　
<style>
input:out-de-rango
{
　　　　borde:2px sólido azul;
}
</<style>
</<head>
<body>
<h3> :out-de-Ejemplo de selector rango CSS.</h3>
<input type="number" min="8" max="18" valor="20"　/>
<p>Ingresa un valor en el input (menor que　8　o　18), ver los cambios en el estilo.</p>
</body>
</html>

Prueba aquí ‹/›

Definición y uso

:out-de-El selector rango se utiliza para definir el estilo de visualización cuando el valor de la etiqueta está fuera del rango especificado.

Nota: 　:out-de-El selector rango solo actúa sobre los elementos que pueden especificar valores fuera de un intervalo, como los atributos min y max de un elemento input.

Compatibilidad del navegador

Los números en la tabla indican la versión del primer navegador que admite esta propiedad.

Selector
:out-de-rango	10.0	No soportado	28.0	5.2	11.0

Sintaxis CSS

/*　Este pseudo-clase puede seleccionar cualquier <input>, pero solo es válido si el elemento especifica un rango de valores y el valor del elemento está dentro de ese rango.　*/
input:out-de-rango {
　　fondo-color: rgba(255, 0, 0, 0.25);
}

Este pseudo-clase se utiliza para proporcionar al usuario una indicación visual de que el valor actual del campo de entrada está fuera del rango permitido.

Páginas relacionadas

Selector CSS :in-rango

Manual de referencia de selector CSS completo

Funciones CSS (Functions)Manual completo de selectores CSS