0

2009-2021 Celula Nerd ®

Brazilian Nerd on planet earth

0
0
Como validar com CSS se um input está preenchido
>
>
Como validar com CSS se um input está preenchido

Como validar com CSS se um input está preenchido

Compartilhe esse conhecimento:

Sim, é possível, e há duas formas de fazer isso sem utilizar JavaScript. Veja como verificar ou validar com CSS se o input foi preenchido com seletor :valid, :invalid e placeholder.

Seletor :valid e :invalid

O :valid do CSS serve para quando seu input tiver um valor válido.

No código abaixo, o uso do required torna obrigatório a inserção de texto no campo input. Quando tem texto, o input é válido, tornando acessível ao seletor :valid.

Quando não tem texto, e é obrigatório com required, também é possível usar o :invalid.

.meu-input { display: block; background-color: blue; } .meu-input:valid { background-color: red; }

Posso usar isso em quais navegadores?

Placeholders

Também é possível alcançar o mesmo resultado utilizando placeholders com um espaço dentro.

Dessa forma, o seletor :placeholder-shown irá detectar quando um placeholder está a mostra, isto é, quando há placeholder e ele não é vazio (!= “”) no elemento.

.meu-input { background-color: red; } .meu-input:placeholder-shown { background-color: blue; }

Posso usar isso em quais navegadores?

Compartilhe esse conhecimento:

Digite o que procura e aperte enter

Carrinho

Nenhum produto no carrinho.