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 font color of the selected item in Button Radios widget

    Asked by criterions on July 15, 2016 at 01:51 PM

    Ok, you should now be able to see the Radio Button control on my form

    https://form.jotform.com/61964027280961

     

    Again, I want to change the background and font color for the selected button.

    change background font color button radio widget
  • Profile Image
    JotForm Support

    Answered by John_Benson on July 15, 2016 at 02:07 PM

    First, you need to specify the Theme color you'll use for the Button Radios.

     This will determine the color of the small up arrow at the bottom of the button. This is actually an image file.

    Now, go to the custom CSS tab inside the widget and use paste this code:

    .radios.blue input.checkedButtonRadio + label {
    color: white !important;

    background: green !important;
    }

    As you can see, blue is the theme color which is why there is a .radios.blue in the selector. If you choose a red theme color then it should be .radios.red. The color value is the text color and the background is the background color of the button.

    Here's the result:

    Hope that helps. Thank you.