Cómo cambiar estilos cuando un input es válido con CSS

Si quieres cambiar el aspecto de un campo cuando el usuario introduce un valor correcto, CSS te permite hacerlo de forma muy sencilla utilizando la pseudoclase :valid.

Esta técnica resulta especialmente útil en formularios de contacto, registros, formularios de pago o páginas de captación, porque proporciona una respuesta visual inmediata al usuario.

En este tutorial aprenderás cómo cambiar estilos cuando un input es válido, cómo combinar :valid con :invalid y qué condiciones debe cumplir un campo para que el navegador determine que su contenido es correcto.

Qué es la pseudoclase en CSS ✅

La pseudoclase :valid permite seleccionar automáticamente los elementos de un formulario cuyo contenido cumple las reglas de validación definidas en HTML.

Puedes consultar el funcionamiento detallado de esta pseudoclase en la documentación de de MDN.

Por ejemplo, un campo con type="email" será considerado válido cuando contenga una dirección de correo electrónico con un formato aceptado por el navegador.

<input type="email" required>

En este ejemplo, el atributo required obliga al usuario a completar el campo, mientras que type="email" establece el tipo de contenido que debe introducir.

Cuando el navegador determina que el contenido es correcto, puedes utilizar CSS para cambiar automáticamente el borde, el fondo, la sombra o cualquier otra propiedad visual.

Cómo cambiar estilos cuando un input es válido 🎨

La forma más sencilla de modificar un campo válido consiste en utilizar input:valid como selector CSS.

input:valid {
    border: 2px solid green;
}

Con este código, todos los campos <input> que superen correctamente la validación mostrarán un borde verde de dos píxeles.

Puedes utilizar prácticamente cualquier propiedad CSS dentro de esta regla para crear un efecto visual adaptado al diseño de tu página web.

Por ejemplo, puedes añadir un fondo ligeramente diferente y una sombra alrededor del campo.

input:valid {
    border: 2px solid green;
    background-color: #f2fff2;
    box-shadow: 0 0 5px rgba(0, 128, 0, 0.2);
}

El resultado será un formulario mucho más intuitivo, ya que el visitante podrá saber inmediatamente si el contenido introducido cumple los requisitos establecidos.

Ejemplo completo de un input válido

Puedes comprobar fácilmente el comportamiento de :valid creando un pequeño formulario HTML con un campo de correo electrónico.

<form>
    <label for="correo">Correo electrónico</label>
    <input
        type="email"
        id="correo"
        name="correo"
        required
    >
</form>

Después puedes aplicar los siguientes estilos.

input {
    padding: 10px;
    border: 2px solid #ccc;
    border-radius: 5px;
    outline: none;
}
input:valid {
    border-color: green;
}

Mientras el contenido no cumpla los requisitos del campo, se mantendrá el borde definido originalmente, pero cuando sea correcto aparecerá el nuevo estilo.

Cómo usar y al mismo tiempo 🔴🟢

CSS también dispone de la pseudoclase :invalid, que selecciona los campos cuyo contenido no cumple las condiciones establecidas.

Puedes consultar más información sobre ella en la documentación de de MDN.

Combinar ambas pseudoclases te permite crear una indicación visual mucho más clara para el usuario.

input:valid {
    border: 2px solid green;
}
input:invalid {
    border: 2px solid red;
}

Con este ejemplo, los valores incorrectos tendrán un borde rojo, mientras que los valores aceptados mostrarán un borde verde.

Esta combinación es especialmente práctica cuando tienes formularios con correo electrónico, números, contraseñas o campos obligatorios.

Cómo determina el navegador si un input es válido 🔎

La pseudoclase :valid no comprueba arbitrariamente si un texto está bien escrito, sino que utiliza las restricciones indicadas mediante HTML.

Algunas de las principales condiciones que puedes utilizar son las siguientes:

1. Utiliza required cuando quieras obligar al usuario a completar un campo.
2. Utiliza type="email" para comprobar el formato básico de una dirección de correo electrónico.
3. Utiliza type="url" cuando necesites que el usuario introduzca una dirección web válida.
4. Utiliza min y max para establecer límites en determinados campos numéricos.
5. Utiliza minlength y maxlength para controlar la longitud permitida del contenido.
6. Utiliza pattern para definir reglas personalizadas mediante expresiones regulares.

Puedes consultar todas estas posibilidades en la guía de validación de formularios de MDN.

Cambiar estilos utilizando el atributo pattern 🧩

El atributo pattern resulta especialmente interesante cuando necesitas crear una validación más específica.

Por ejemplo, puedes exigir que un campo contenga exactamente cinco números.

<input
    type="text"
    pattern="[0-9]{5}"
    required
>

Después puedes cambiar su apariencia mediante CSS.

input:valid {
    border-color: green;
    background: #f5fff5;
}
input:invalid {
    border-color: red;
}

El campo solamente será considerado válido cuando el usuario introduzca exactamente cinco dígitos, por lo que el estilo verde no aparecerá antes.

Evitar que un input vacío aparezca como inválido

Uno de los pequeños inconvenientes de utilizar :invalid directamente consiste en que algunos campos pueden mostrar el estilo de error antes de que el usuario haya empezado a escribir.

Puedes solucionar determinadas situaciones utilizando la pseudoclase :placeholder-shown junto con tus reglas de validación.

<input
    type="email"
    placeholder="Correo electrónico"
    required
>

Después puedes utilizar CSS para diferenciar mejor los estados.

input {
    border: 2px solid #ccc;
}
input:not(:placeholder-shown):valid {
    border-color: green;
}
input:not(:placeholder-shown):invalid {
    border-color: red;
}

De esta forma, el navegador aplicará los estilos correspondientes cuando el usuario haya comenzado a introducir información en el campo.

Añadir un icono cuando el input sea válido ✔️

También puedes utilizar CSS para mostrar un icono o indicador visual adicional cuando el contenido sea correcto.

Una solución sencilla consiste en colocar el campo dentro de un contenedor y utilizar un elemento auxiliar.

<div class="campo">
    <input type="email" placeholder="Email" required>
    <span class="estado">✓</span>
</div>

Después puedes ocultar inicialmente el indicador y mostrarlo únicamente cuando el campo sea válido.

.estado {
    display: none;
}
input:valid + .estado {
    display: inline;
}

Este pequeño detalle puede mejorar notablemente la experiencia de usuario del formulario, especialmente cuando existen muchos campos que completar.

Cambiar únicamente un tipo determinado de input

No siempre querrás aplicar los mismos estilos a todos los campos de tu formulario, por lo que puedes combinar selectores de atributos con :valid.

input[type="email"]:valid {
    border-color: green;
}

En este caso solamente cambiarán los campos de correo electrónico que sean considerados válidos.

También puedes utilizar clases CSS para tener un control todavía mayor.

<input class="campo-email" type="email" required>

.campo-email:valid {
    border-color: green;
}

Utilizar clases suele ser una buena opción cuando necesitas personalizar diferentes formularios dentro de WordPress o de cualquier otra página web.

Añadir una transición al cambio de estilo ✨

Si quieres obtener un resultado visual más agradable, puedes utilizar la propiedad transition para suavizar el cambio entre estados.

input {
    border: 2px solid #ccc;
    transition: border-color 0.3s ease,
                box-shadow 0.3s ease;
}
input:valid {
    border-color: green;
    box-shadow: 0 0 5px rgba(0, 128, 0, 0.25);
}

Gracias a esta transición, el cambio no aparecerá bruscamente y conseguirás una interacción más pulida y profesional.

Tabla resumen de pseudoclases y atributos

Ejemplo recomendado de CSS para tus formularios 🚀

Si buscas una solución sencilla que puedas reutilizar, puedes empezar con este fragmento de CSS.

input {
    padding: 12px;
    border: 2px solid #ccc;
    border-radius: 6px;
    transition: all 0.25s ease;
}
input:not(:placeholder-shown):valid {
    border-color: green;
    background-color: #f5fff5;
}
input:not(:placeholder-shown):invalid {
    border-color: red;
    background-color: #fff5f5;
}

Este código permite diferenciar claramente los campos correctos de los campos que necesitan alguna modificación, sin necesidad de utilizar JavaScript.

Ventajas de cambiar el estilo de los inputs válidos

Utilizar estas pseudoclases puede ayudarte a crear formularios más fáciles de entender y completar.

Entre sus principales ventajas encontrarás las siguientes:

1. Proporcionas feedback inmediato mientras el usuario completa el formulario.
2. Puedes reducir errores antes de que el usuario pulse el botón de enviar.
3. Mejoras la experiencia de usuario sin recurrir necesariamente a JavaScript.
4. Puedes personalizar fácilmente bordes, fondos, sombras, iconos y otros elementos visuales.
5. Mantienes separadas la estructura HTML y la presentación CSS del formulario.

Conclusión

Cambiar estilos cuando un input es válido es una técnica sencilla pero muy eficaz para conseguir formularios más intuitivos, visuales y cómodos de utilizar.

La pseudoclase :valid permite aplicar automáticamente estilos cuando el contenido cumple las restricciones HTML, mientras que :invalid te permite destacar aquellos campos que todavía necesitan ser corregidos.

Combinando estas pseudoclases con atributos como required, pattern, minlength, min o max, puedes crear sistemas de validación visual bastante completos utilizando únicamente HTML y CSS.

Si además utilizas transiciones, colores discretos e indicadores visuales, conseguirás que el usuario entienda rápidamente qué campos están correctamente rellenados y cuáles necesita revisar.