Published on Wednesday, December 21, 2022
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 😃.
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