0

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>

4
  • Resumindo: Acredito que a ideia do :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 o value, acho que o caminho seria outro. Commented 31/08/2018 às 20:01
  • @WallaceMaxters Não tem verificação nem validação, é só um experimento de UX mesmo... o estranho é que ele aceita o empty, mas não o not:empty... logo o input é sempre empty por ser void? Fiquei meio encucado com isso
    – hugocsl
    Commented 31/08/2018 às 20:15
  • Creio que tem a ver com tags vazias, onde o input é um deles.
    – Sam
    Commented 31/08/2018 às 20:18
  • @sam desconfio fortemente disso...
    – hugocsl
    Commented 31/08/2018 às 20:23

1 Resposta 1

0

O elemento input faz parte dos elementos void. Os elementos void são os que não possuem em sua especificação uma tag de fechamento, como por exemplo <img> ou <hr>. Então estes elementos void serão sempre considerados vazios, mesmo contendo atributos como value ou placeholder.

O pseudo selector :empty será correspondido em:

<div></div>

<div><!-- test --></div>

Mas não funcionará em:

<div> </div>

<div>
  <!-- test -->
</div>

<div>
</div>

Você pode tentar dar um feedback para o usuário de outras formas. Uma delas seria usar os seletores :valid e :invalid para exibir as cores de forma a chamar a atenção do usuário.

Referências:

https://www.w3.org/TR/selectors/#empty-pseudo

https://www.w3.org/TR/html5/syntax.html#void-elements

https://css-tricks.com/almanac/selectors/v/valid/

https://css-tricks.com/almanac/selectors/i/invalid/

2
  • Obrigado pela dica e por contribuir, vc tem a referência de link que fala que todo elemento void é considerado vazio ? Eu queria ler mais a respeito
    – hugocsl
    Commented 2/09/2018 às 23:18
  • Sseria este w3.org/TR/html5/syntax.html#void-elements
    – samu101108
    Commented 4/09/2018 às 0:03

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .