Estou tentando fazer um modelo de formulário onde penso em melhor a experiencia do usuário dando um feedback visual quando o campo é preenchido. Ai me deparei com um "problema" que não sei explicar...
Porque no input
a pseudo classe :empty
funciona, mas a :not(:empty)
não funciona? Já na div
os dois funcionam perfeitamente.
Para ilustrar o que eu falo segue o código. Repare que o input
fica sempre vermelho, mesmo tendo conteúdo dentro. Já na div
funciona perfeitamente.
input:empty {
border: 2px solid red;
}
input:not(:empty) {
border: 2px solid green;
}
div:empty {
border: 2px solid red;
}
div:not(:empty) {
border: 2px solid green;
}
div {
width: 100px;
height: 30px;
}
<input type="text">
<input type="text" value="content">
<div></div>
<div>content</div>
:empty
seja para elementos. Por exemplo, uma div<div></div>
é:empty
. No caso, input não tem tag de fechamento, então não faria sentido usar. Se você está tentando verificar ovalue
, acho que o caminho seria outro.