Conditionally Format Boolean

[Tracy Martinez]

I’m using DFFS.
I’d like to conditionally format a yes/no Boolean slider background color to appear red if true/yes and gray if false/no. I tried Field CSS first
.spjs_boolean_slider {background:red}
but there’s no condition so it was always red. Then javascript but I can’t get that working either. Can you offer help?

• This topic was modified 3 years, 9 months ago by Tracy Martinez.

[Alexander Bautz]

Add this to your Custom CSS:

input:checked+.spjs_boolean_slider {
    background-color:red;
}

Alexander

[Tracy Martinez]

That worked perfectly, thank you so much! I did however notice on the edit form it was still blue, I’m assuming because I have it as a read-only field. Is there a way to get the red to appear with the field as read-only?

[Alexander Bautz]

Sorry for the late reply – if you right click the readonly control and select “inspect” to open the developer tools you see that it has a class like this:

boolean_true+.spjs_boolean_slider

To override it you just add this to your Custom CSS:

.boolean_true+.spjs_boolean_slider{
    background-color:red;
}

Alexander

[Author]

Posts