DEV Community 👩‍💻👨‍💻

Cover image for CSS input checker
Fabio Russo
Fabio Russo

Posted on

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>

Enter fullscreen mode Exit fullscreen mode
CSS


.text{
      opacity: 0;
     }

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

Enter fullscreen mode Exit fullscreen mode

(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!

cool

Top comments (0)

🌱 DEV runs on 100% open source code known as Forem.

 
Contribute to the codebase or learn how to host your own.