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

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

    Asked by criterions 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?

    Page URL:
    https://form.jotform.com/61895991419978

    text boxes selected boxes check boxes button check boxes
  • Profile Image
    JotForm Support

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

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

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

    Answered by criterions on July 13, 2016 at 01:58 PM

    PERFECT!!! Many thanks!

  • Profile Image
    JotForm Support

    Answered by Jan on July 13, 2016 at 02:02 PM

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