Here's an interesting #CSS method for styling an adjacent element based on whether an <input> is empty or not.

input[type="search"]:placeholder-shown + i {
    /* input is empty */
    display: none;

input[type="search"]:not(:placeholder-shown) + i {
    /* input is not empty */
    display: inline-block;

In this case I'm hiding and showing a clickable icon that clears the search text if there is any. No JavaScript needed other than the click event 😃.


Dec 21, 2022

About Non Sequiturs

Non Sequiturs is the personal blog of Michael Argentini.

I'm a software developer and Managing Partner for Fynydd and Blue Sequoyah Technologies, the project lead for Coursabi, and Āthepedia founder. I also have several nerdy open source projects on Github.

I'd describe myself as an Oxford comma advocate, autodidact, aspiring polymath, and boffin, with a mechanical keyboard addiction. You can also find me on Mastodon.

Michael Argentini

Copyright © 2024 Michael Argentini. All rights reserved.