Changing the background and text color for selected item in the Button check boxes widget

I would like to know the correct CSS to inject to control the background and text color for any selected item using the Button Checkboxes widget. Is this possible?

Currently, the CSS being applied on the widget is this:

.checkboxes input + label {
color: #999999; /* text color */
background: linear-gradient(to bottom, #fff 0%, #eee 100%); /* background color */
}

If you want to change it, then please use this CSS code:

.checkboxes input + label {
color: white; 
background: blue; 
}

You need to insert this code inside the widget. Select the widget and then click the wizard icon.

After that, go to the Custom CSS tab and paste the code.

Hope that helps. Thank you.

Ok, that's definitely very cool. But, what I want is to change the background and text color when it is checked. When it isn't checked, it should retain its default color. Is that possible?

Yes, that is possible. Here's the CSS code:

.checkboxes input.checkedButtonCheckbox + label {
color: white;
background: blue;
}

This code should be inserted inside the widget. Here's the result:

If you have any questions, let us know. Thank you.

PERFECT!!! Many thanks!

You're welcome. Glad to hear that your happy with the support. Have a nice day!