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.
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 😃.
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!
Whether your organization is big or small, book a conference call or request a project estimate and find out how Fynydd can help with your next web development or mobile app project!
Fynydd LLC / King of Prussia, Pennsylvania; United States / +1 855-439-6933