Comprobar si un input está vacío solo con CSS y HTML

¿Se puede saber si un input está vacío usando solo CSS y HTML?

En este tutorial te doy unos cuantos trucos para comprobar si un input es válido o no usando solo CSS y HTML. No es algo que debas usar por sí solo, sino como complemento de una validación en PHP, pero es una alternativa interesante si no quieres complicarte con JavaScript.

Comprobar si el input está vacío

Primero, montemos un formulario. Vamos a usar uno sencillo con un único input, para comprobar si está vacío durante la validación del formulario HTML, añado el atributo obligatorio required.

<form>
  <label> Input </label>
  <input type="text" name="input" id="input" required />
</form>

Hasta aquí nada complicado: el atributo required es de sobra conocido. También existe readonly, que impide modificar un valor por defecto.

Llegados a este punto hay un problema: si el usuario escribe un espacio en blanco, el input queda «relleno». Técnicamente es cierto, porque ha tecleado algo, pero no queremos que un espacio en blanco dé el campo por válido.
No basta con esto, así que necesitamos un control más estricto.

Comprobaciones adicionales

HTML te permite validar los inputs con expresiones regulares gracias al atributo pattern.
Como no queremos aceptar los espacios en blanco, vamos a probar con el patrón .*S.*. Significa: uno o varios caracteres que no sean espacios.

<form>
  <label> Input </label>
  <input type="text" name="input" id="input" required pattern=".*S.*"/>
</form>

Los inputs no válidos

No queremos usar :invalid, porque no vamos a arrancar el input en estado no válido (cuando el input está vacío, ya es no válido).
Existe la pseudoclase :placeholder-shown, que sirve para comprobar si se está mostrando el placeholder. La idea es esta:

1. Escribes un carácter en el campo
2. Si el placeholder desaparece, significa que el usuario ha tecleado algo
3. Pasas a la validación (o a la invalidación)

/* Afficher les bordures rouges lorsqu'elles sont remplies, mais non valides */
input:not(:placeholder-shown) {
  border-color: red;
}

Ojo: asegúrate de que los estilos de campo válido van después de los de campo no válido.

/* Afficher les bordures rouges lorsqu'elles sont remplies, mais non valides */
input:not(:placeholder-shown) {
  border-color: hsl(0, 76%, 50%);;
}
/* Afficher les bordures vertes lorsqu'elles sont valides */
input:valid {
  border-color: green;
}

Atención: Edge no soporta :placeholder-shown, así que seguramente todavía no sea buena idea usarlo en producción. Y no hay una forma cómoda de detectar esta pseudoclase.