:not(:placeholder-shown) example

See the Code - See it Full Page - See Details

This pen shows how you might use :not(:placeholder-shown) to change the font-family of an input depending on whether it has a placeholder visible or not. On :focus the input will stay the same but once you start typing – boom! A cursive font appears.

This Pen uses: HTML, SCSS, JavaScript, and