Button Radios widget: How to Change the Background Color of the Options

change background color of line radio boxes like this in my form

https://form.jotform.com/251092023419045

Hi Zahid,

Thanks for reaching out to Jotform Support. You can easily add a red background color to one of the options by Injecting CSS Codes into the Button Radios widget. Let me walk you through it:

1. First, copy the code below. This works for the Yes option. If you want to apply the red background to the No option, just change the number inside the parentheses from 1 to 2.

/*thread 26517951*/

div:nth-child(1) > label > span {

   background: red;

}

/*ends here*/

2. In Form Builder, click on the Button Radios widget to select it.

3. Next, click on the wand icon to open the widget's settings.

4. Click on the Custom CSS tab, then paste the code you just copied to the CSS code box.

5. Click on Update at the bottom of the page, and you're done.

Give it a try and let us know how it goes.

color of selected item only.

Hi Zahid,

If you want to change the background color of the selected option, remove the current custom CSS codes in the widget CSS code text field and inject the custom CSS codes below, and follow the same step my colleague John provided previously:

input[type="radio"]:checked + label span {

  background-color: red;

}

Here's the result:

Give it a try and let us know how it goes.

text should be white when it is selected

I also want to change input text font size

Hi Zahid,

You can easily change the label color to white when selected and make the text larger by modifying the code provided by my colleague. Simply copy the updated code below and add it to the widget:

input[type="radio"]:checked + label span {

    background-color: red;

    color: #ffffff;

    font-size: 16px;

}

input[type="radio"] + label span{

     font-size: 16px;

}

This will be the result:

Give it a try and let us know if you need any more help.

Hi Zahid,

To avoid confusion, I moved your other question to a new thread and helped you with that here.

Let us know if there’s anything else we can help you with.

Hi Zahid,

Just to keep things clear, I moved your other question to a new thread.

Reach out again if you need any other help.

Hi Zahid,

I checked your form, and I can see that the Texts are white when it is selected.

Can you take a screenshot of what’s happening and send it to us? We’ve got a guide here that’ll show you how to do that.

Once we hear back from you, we'll be able to help you with this.