CSS :valid Pseudoclase
La pseudoclase CSS :valid aplica estilos a controles de formulario cuyo valor supera la validación. Aprende cómo funciona con ejemplos reales.
La pseudoclase :valid coincide con cualquier control de formulario (como <input>, <select> o <textarea>) cuyo valor actual supera la validación de restricciones integrada del elemento. Ofrece una forma puramente CSS de reaccionar a si los datos de un campo son aceptables — sin necesidad de JavaScript.
Un control es seleccionado por :valid cuando tiene restricciones de validación y su valor las cumple todas. Los casos más comunes son:
- Un
<input type="email">que contiene una dirección correctamente formateada. - Un
<input type="number">cuyo valor se encuentra dentro del rangomin/max. - Un campo
type="url",type="date"otype="tel"con datos bien formados. - Un campo con un atributo
patterncuyo valor coincide con la expresión regular. - Un campo
requiredque no está vacío.
Esta pseudoclase es la contraparte de :invalid. Juntas permiten ofrecer retroalimentación visual instantánea mientras el usuario escribe. También está estrechamente relacionada con :required, :optional y :in-range.
Aspectos importantes
- Un control sin ninguna restricción (por ejemplo, un simple
<input type="text">sinrequired,patternni límites de longitud) siempre se considera válido — coincidirá con:validincluso cuando esté vacío. - La coincidencia se actualiza en tiempo real mientras el usuario edita, no solo al enviar el formulario, por lo que los estilos pueden parpadear mientras se escribe. Para retrasar la retroalimentación, combínala con
:focuso las pseudoclases:user-invalid/:user-valid. - La especificidad importa:
input:valideinput:invalidtienen la misma especificidad, por lo que la regla declarada más tarde en la hoja de estilos gana en casos límite. Mantén el orden de forma intencionada.
Versión
Sintaxis
Sintaxis CSS :valid
:valid {
css declarations;
}Ejemplo del selector :valid:
Ejemplo de código CSS :valid
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
border: 1px solid #cccccc;
padding: 5px 10px;
}
input:valid {
background-color: #eeeeee;
}
</style>
</head>
<body>
<h2>:valid selector example</h2>
<form>
<input type="email" value="[email protected]" />
</form>
</body>
</html>En el ejemplo anterior, el fondo gris desaparece en el momento en que se introduce una dirección de correo electrónico inválida, porque el input ya no coincide con :valid.
Ejemplo con campos requeridos e indicador verde
Un patrón habitual es combinar :valid con :invalid para que cada campo muestre claramente un estado de "correcto / aún no". Aquí, los campos requeridos se vuelven verdes una vez que contienen datos aceptables y rojos mientras no los tienen:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
padding: 6px 10px;
margin-bottom: 10px;
display: block;
border: 2px solid #cccccc;
}
input:valid {
border-color: #2eca6a;
}
input:invalid {
border-color: #e3382c;
}
</style>
</head>
<body>
<h2>Valid vs. invalid fields</h2>
<form>
<input type="email" placeholder="Email" required />
<input type="number" min="1" max="10" placeholder="1 to 10" required />
</form>
</body>
</html>Como ambos campos son required, comienzan coincidiendo con :invalid (vacíos) y cambian a :valid una vez que se ingresa un correo electrónico real y un número dentro del rango 1–10.
Pseudoclases relacionadas
:invalid— exactamente lo opuesto: coincide con los controles que no pasan la validación.:requiredy:optional— coinciden según si un control es requerido o no.:in-range— coincide con inputs numéricos o de fecha cuyo valor está dentro demin/max.