What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Change to background colours of button checkbox widget

    Asked by Benflips 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

    Page URL:
    https://www.jotform.com//?formID=43420990799871

    checkbox checkbox widget checkbox widgets
  • Profile Image

    Answered by Benflips on July 13, 2016 at 10:45 PM

    And also button radio widget too please...

  • Profile Image
    JotForm Support

    Answered by beril 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

    Answered by Benflips 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
    JotForm Support

    Answered by Welvin 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

    Answered by Benflips 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)
    ...