In CSS why does pseudo-classes: empty work and a: not (: empty) do not work in input?

Question

In CSS why does pseudo-classes: empty work and a: not (: empty) do not work in input?

Navigation

#1 by (0 votes)

0

I'm trying to make a form template where I think of the user experience better by giving visual feedback when the field is filled out. There I came across a "problem" that I can not explain ...

Because no input pseudo class :empty works, but :not(:empty) does not work? In div both work perfectly.

To illustrate what I say follows the code. Notice that the input is always red, even with content inside. While div works perfectly.

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>

html html5 css css3 input

asked by anonymous 31.08.2018 / 21:34

1 answer

Stylization and operation of the dropdown menu in Wordpress Laravel Spatie Model Status

score 0 · Answer 1

The input element is part of the void elements. The void elements are those that do not have a closing tag in their specification, such as <img> or <hr> . Then these void elements will always be empty, even if they contain attributes like value or placeholder .

The :empty pseudo selector will be matched in:

<div></div>

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

But it will not work on:

<div> </div>

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

<div>
</div>

You can try giving feedback to the user in other ways. One of them would be to use the :valid and :invalid selectors to display the colors in order to catch the user's attention.

References:

link