Hi Team,
I have a client that wants to update the color of a facet once an option is clicked.
It appears when facet checkboxes are clicked, this determine whether or not the input type=“checkbox” value data-index is a ‘0’ or a ‘1’.
How can I target just states when the data-index is a 0? (i.e. the checkbox is marked)
Hi Luc,
This resource on using attributes as selectors may help!
Hey @afarooque ,
This is definitely on the money! Thank you so much for sharing… I’m very close now.
Quick correction for anyone reading this in my original post - the 0/1 has nothing to do with whether or not the box is checked off… there is literally a checked state (see screenshot below). Those numbers are to do with filterbox indexing.
Thus, using attribute selectors, do you know how I can test for checked in one class, and then use that to change color in the class below it? The screenshot below this visualizes what I’m saying better. (test for checked in one class, affect color in another class)
I tried the code below earlier - which sort of worked - but it actually just impacted the first facet option entirely - since that is filterbox index 0, 0. Whereas I want to target all filterboxes that are checked.
label[for="js-yext-checkbox-facets.filterbox.filter0-0"] { color: #087d90; }
Assuming you want to change what the text/label looks like, you need to target the sibling selector - Adjacent sibling combinator - CSS: Cascading Style Sheets | MDN. Try the below.
.yxt-FilterOptions-checkboxInput:checked+.yxt-FilterOptions-optionLabel
{
your CSS goes here
}
Perfect!! That did the trick. Thank you for the super fast responses Amani.
