Here’s a neat little CSS trick I found.

I know there is a way to select and style the placeholder messages of <input> boxes via a pseudo-class ::placeholder.

Given <input placeholder="A message here" class="foo">

You can select the input state that is untouched by targeting .foo:placeholder-shown{ /*...*/ }

Neat trick to have a red box around an untouched <input> that disappears as soon as the users enters some text, because as soon as they do, the placeholder is no longer shown.

❯ ★ ✎ ✦ ✮ ✯ ❂ ⦿ ❯ ★ ✎ ✦ ✮ ✯ ❂ ⦿ ❯ ★ ✎ ✦ ✮ ✯ ❂ ⦿ ❯ ★ ✎ ✦