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

  • Profile Image
    criterions
    Asked on July 13, 2016 at 10:06 AM

    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?

  • Profile Image
    Jan
    Answered on July 13, 2016 at 12:41 PM

    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.

  • Profile Image
    criterions
    Answered on July 13, 2016 at 12:49 PM

    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?

  • Profile Image
    Jan
    Answered on July 13, 2016 at 01:57 PM

    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.

  • Profile Image
    criterions
    Answered on July 13, 2016 at 01:58 PM

    PERFECT!!! Many thanks!

  • Profile Image
    Jan
    Answered on July 13, 2016 at 02:02 PM

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