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 😃.

#code

Dec 21, 2022


Copyright © 2024 Michael Argentini. All rights reserved.