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