Change to background colours of button checkbox widget

  • Profile Image
    Benflips
    Asked on July 13, 2016 at 10:37 PM

    Hi.

    Like the changes you've been able to provide for change of colurs to both form collapse and matrix widgets, could you also provide code to change background colours for button checkbox widgets?

    Thanks in advance

  • Profile Image
    Benflips
    Answered on July 13, 2016 at 10:45 PM

    And also button radio widget too please...

  • Profile Image
    beril
    Answered on July 14, 2016 at 04:50 AM

    You can change the color of button checkbox widget by adding the code below:

     

    button checkbox widget unchecked:

    .checkboxes input + label {

    color: #aaeb0f; 

    background: rgba(65, 26, 153, 0.39); 

    }

     

    If you want to change the color when it is checked you need the add the CSS code below:

    button checkbox widget checked:

     

    .checkboxes input.checkedButtonCheckbox + label {

    color: #aaeb0f !important; 

    background: rgba(65, 26, 153, 0.39) !important; 

    }

    At that time it will work as you see below:

     

     

    button radio widget unchecked:

    .radios input + label {

    color: #aaeb0f !important; 

     

    background: rgba(65, 26, 153, 0.39) !important; 

    }

     

    button radio widget checked:

     

    .radios.blue input.checkedButtonRadio + label

    {

    color: #aaeb0f !important; 

     

    background: rgba(65, 26, 153, 0.39) !important; 

    }

     

     

    If you have any question or issues, please do not hesitate contacting us. We will be glad to assist you.

  • Profile Image
    Benflips
    Answered on July 15, 2016 at 04:45 AM
    Thank you.
    I've just put this code in and it does look great.
    However, I've also put it into the button radio widget and it doesn't quite
    work - is has the 'selected' mode (colour change) active for all options...
    ...
  • Profile Image
    Welvin
    Answered on July 15, 2016 at 08:24 AM

    For the Button Radios widget, you should use the following codes only:

    .radios input + label {

    color: #999 !important; 

    font-weight: normal;

    }

    .radios.blue input.checkedButtonRadio + label {

    color: #aaeb0f !important; 

    background: rgba(65, 26, 153, 0.39) !important; 

    }

     

  • Profile Image
    Benflips
    Answered on July 15, 2016 at 07:45 PM
    Thank you. Changes made!
    *Regards,*
    *Dr. Ben Phillips*
    Chiropractor
    B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
    ...