Verificar se um input está vazio apenas com CSS e HTML

Será possível saber se um input está vazio apenas com CSS e HTML?

Neste tutorial dou-te alguns truques para verificar se um input é válido ou não apenas com CSS e HTML. Não é uma técnica para usar sozinha, mas antes como complemento de uma validação em PHP, ainda assim, é uma alternativa interessante se não quiseres complicar-te com JavaScript.

Verificar se o input está vazio

Comecemos por construir um formulário. Vamos usar um formulário simples, com um único input, depois, para verificar se está vazio durante a validação do formulário HTML, acrescento o atributo obrigatório required.

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

Até aqui nada de complicado: o atributo required é bastante conhecido. Existe também o readonly, que impede a alteração de um valor por omissão.

Nesta fase há um problema: se o utilizador escrever um espaço no campo, o input fica «preenchido». Tecnicamente é verdade, porque escreveu ali alguma coisa, mas não queremos que uns espaços tornem o input válido.
Não chega, portanto: precisamos de um controlo mais rigoroso.

Verificações complementares

O HTML permite-te validar os inputs com expressões regulares, através do atributo pattern.
Como não queremos que os espaços em branco sejam aceites, vamos experimentar o padrão .*S.*. Este padrão significa: um ou mais caracteres que não sejam espaços.

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

Os inputs inválidos

Não queremos usar :invalid, porque não vamos arrancar com o input num estado inválido (quando o input está vazio, já é inválido).
Existe a pseudo-classe :placeholder-shown, que serve para verificar se o placeholder está visível. A ideia é esta:

1. Escreves um caráter no campo
2. Se o placeholder desaparecer, é sinal de que o utilizador escreveu alguma coisa
3. Passas à validação (ou à invalidação)

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

Atenção: garante que os estilos válidos vêm depois dos estilos inválidos.

/* 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;
}

Atenção: o Edge não suporta a :placeholder-shown, por isso ainda não é boa ideia usá-la em produção. E não há forma prática de detetar esta pseudo-classe.