Selected Filter css change

  • 1
  • Question
  • Updated 3 years ago
  • Answered
Hi ,

Would anyone knows if their is a way to change the text /background color of a filter when Selected?

if yes , would gladly appreciate an example

Looked in theme and no option I could see for this

Thank you
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb

Posted 3 years ago

  • 1
Photo of Karen Waldschmitt

Karen Waldschmitt, Official Rep

  • 8,260 Points 5k badge 2x thumb
Hi Dave~

By default, a Skuid filter will show which option you have selected from the filter in the main filter box so you will know what was selected. What are you wanting it to do in addition to this? Can you include a use case to help me better understand what you are trying to do?

Thanks!
Karen 
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
Hi Karen,

I'm trying to accomplish the following example:

I have a filter with Default Value("None Selected" Option Text) named: All Fruits

This filter has 3 different Sub options: Apple, banana, Kiwi

If the filter is NOT on the default (meaning no selection/fruit has been selected), to change the color of text or background in filter. So example I selected Apple, this option should show the text "apple" in red

This will be used a visual Cue that a Filter is Selected

So if filter = None Selected. no css

Any selection made, css to be applied


Thx
Photo of Emily Davis

Emily Davis, Employee

  • 3,502 Points 3k badge 2x thumb
Hi, Dave,
Unfortunately, I don't think there's a great way to do this without some custom code. Since there's no CSS class applied specifically for the "None" option, you can't really target that information through CSS. I think the best option you have is through a jQuery :contains('text') selector. You can use that to target the "None Selected" item based on the text displayed for this item.
Hope that helps,
Emily