Tell us what you are trying to do?
I'm trying to style the checkboxes with icons on this page: hidden link
I want the opacity of the label to be set at 0.5 if unchecked and 1 if checked.
I tried many css combinaison but nothing seems to work.
I tried for exemple:
.categories-filter input[type="checkbox"]:checked + label {
opacity: 1;
}
.categories-filter input[type="checkbox"]:not(:checked) + label {
opacity: 0.5;
}
In any cases the :checked property doesn't seem to work.
Inspecting the markup for the checkbox & label I note that it includes a non-breaking space element in between the input and the label (screenshot).
You are using the adjacent sibling connector (+ sign), but because of that space they are non-adjacent siblings, so you should use the general sibling combinator "~" in your selectors, e.g.
I'm talking about the checkboxes that have icons. (see screenshot) - those are checkboxes that have been styled. That's the ones I'm trying to apply the css to.
I'm not talking about the Amenities checkboxes. Does that make sense?
The output of those is different. Whereas the other checkboxes are output with the label following the input (making it relatively straightforward to style the label depending on the status of the input), the output of these checkboxes has the input wrapped in the label, i.e. the input is a child of the label element.
Until fairly recently it was not possible to target parent elements with CSS, which is what is required in this scenario, but you can now use the :has pseudo-selector to do so.
I made a quick demo of it working here: hidden link
I'll let you add the details required to specifically target the correct group of filters.
Can I ask you one last thing? What is the status by default of the label? Because all the pins are showing when you arrive on the page but the checkboxes seems to be unchecked.
You mean all the map markers are showing when you first visit the page?
That's because when you visit the page you are seeing the unfiltered results (think Amazon rather than Google).
Once you start clicking checkboxes then the filters apply and only the relevant results are shown.
If you didn't like that behaviour it would be possible to use a conditional shortcode or block to only show the markers when a filter had been applied, but the details of the implementation would depend on whether you are using the blocks UI or the legacy shortcodes UI. (It needs implementing with a shortcode for the markers, but you can mix and match to some extent.)
