Change the style of an input based on if there is a placeholder

The :placeholder-shown pseudo-selector opens up a few fun possibilities in styling your forms. Unlike the ::placeholder pseudo-element which only lets us style the placeholder text itself, this allows us to style the entire input based on whether or not the placeholder is visible.

Code from this video:

---


Want to really step up your CSS? I've got a course just for you!



I have a newsletter!



---



My Code Editor: VS Code -



How my browser refreshes when I save:



---


Support me on Patreon:



I'm on some other places on the internet too!



If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.



Instagram:

Twitter:

Codepen:

Github:

Kevin Powell,tutorial,html,css,pseudo-selector,:placeholder-shown,placeholder-shown,::placeholder,html placeholder,style placeholder css,