Changing the background and font color of the selected item in Button Radios widget

  • Profile Image
    criterions
    Asked 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.

  • Profile Image
    John_Benson
    Answered 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.