Here's an interesting method for styling an adjacent element based on whether an <input> is empty or not.
The traditional method for accomplishing this is to use JavaScript, which involves more complex code that is difficult to write and manage. It would require using a selector to find both elements, determining if the input is empty or not, and altering the styles or class names of the adjacent element.
The method below only requires CSS.
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 😃.
There's usually more to the story so if you have questions or comments about this post let us know!
Do you need a new software development partner for an upcoming project? We would love to work with you! From websites and mobile apps to cloud services and custom software, we can help!
