CMS Filter Active Radio button not working

So I wanted to use radio buttons instead of checks for my portfolio filtering because i only want one cateogry showing at a time. I added radio buttons as the filter buttons but jsut hid the radio element.

I want to be able for these to have an active state of being inverted in color (black background white text). Whenever I try and follow the instructions on finsweet it just makes all the project categories adapt that style whether selected or not. Read only link attached here. Any help would be acppreacited!

https://preview.webflow.com/preview/natalies-marvelous-site-4-2e9e940f4efc9?utm_medium=preview_link&utm_source=designer&utm_content=natalies-marvelous-site-4-2e9e940f4efc9&preview=1fd904f6e9518884ac23c05536520614&workflow=preview

Hello @natalieharris1187!

Can you please try adding the fs-cmsfilter-active="is-active" attribute to the same field with the identifier? It should look like the image below.

I recommend adding the ‘.is-active’ class as a stand-alone class so it lives in the style sheet. You can also add it to an embed like

<style>
  .is-active {
    background-color: black;
    color: white;
  }
</style>

Below is the result of these changes to the site.

Let me know if you need any help!

Hi, I added the style code to the head section on the page. I also added this attribute to the element you show selected. It’s still not working.

@natalieharris1187 I see you’ve also added the attribute to this element, I’m not sure if this might be causing issues.

Another thing, I see the class is added anyway to the button correctly but the styles seem to be ignored. Might be because you use interactions and hovering out might be clearing or overriding this.

Could you try setting this styles with the Hover state in the style panel?