CSS input checker

Easy stuff... cool result

Here we're going to use:

:not()

The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.

:placeholder-shown

The :placeholder-shown CSS pseudo-class represents any or element that is currently displaying placeholder text.

Check input with CSS

If we use those together with an input (with a placeholder), like this:

input:not(:placeholder-shown)

we can manage stuff on the page, we want to show, only when there's something in the input form, without using Javascript.

HTML

<input placeholder="My Placeholder">
<div class="text">Now... you can see me</div>

CSS

.text{
      opacity: 0;
     }

input:not(:placeholder-shown) + .text{
      opacity: 1;
     }

(The + selector will catch the .text placed immediately after the input)

With that we're hiding the .text, just to show it when input got no placeholder anymore, so, when we're writing over it!