Customizing Button Radio Widget

Hello there,

Thank you for your amazing support!

I'm wondering if it is possible to customize the look and feel of the Button Radio widget.

#input_219

I want the corners rounded to match the rest of the form

I want the background not to have any effects, it should be a solid color

I want to change the effect when clicking on it, the whole background color should change (solid).

Can this be done?

Greetings.

Please try adding the following CSS directly to the widget:

label {

  width: 150px;

  border-radius: 100px;

  background: #e5e7f2 !important;

  color: #2c3345;

}

.wrapperButtonRadio {

  border: none;

  box-shadow: none;

}

.radios.blue input.checkedButtonRadio+label {

background: #999 !important;

color: white !important;

}

You can add it to the Custom CSS tab:

You will need to add it to each field individually.

Furthermore, I've noticed you are collecting passwords in your form. Note that our system will automatically suspend your account when you are using the word "Password". Please update it to avoid suspension.

Let us know if you have any additional questions.

Thank you so so much!

Is it possible to make some minor adjustments?

The font color should be darker

When the "allow" button is selected the background should be a light green

When the "Block" button is selected the background should be a light red.

Thanks a million!

Regarding the "password" issue, the form is asking the user to create a password not share an existing one.

It has been whitelisted as per https://www.jotform.com/answers/2880906-account-suspended

My apologies. I missed that ticket. In that case, you don't need to worry about that field.

To update the background color, please use the following CSS, instead of the previously provided one:

label {

  width: 150px;

  border-radius: 100px;

  background: #e5e7f2 !important;

  color: #000000 !important;

}

.wrapperButtonRadio {

  border: none;

  box-shadow: none;

}

.radios.blue .rowButtonRadio:first-child 

  input.checkedButtonRadio+label {

  background: #039503 !important;

  color: white !important;

}

.radios.blue .rowButtonRadio:last-child 

  input.checkedButtonRadio+label {

  background: #eb1010 !important;

  color: white !important;

}

If you wish to remove the little blue arrow, please also add the following after the previous CSS:

.actviv_elem {

  display: none;

}

Let us know if this works for you.

You're the best!

thank you so much!

I do have 1 issue, one of the radio buttons has 3 options which now doesn't get highlighted at all.

Hi,

I have checked the radio buttons and it seems to be highlighted with color when selected.

Could you please recheck and let us know how it goes?

We look forward to your response.

Thanks for getting back to me.

I played around a little bit and found this thread https://www.jotform.com/answers/2684119-change-the-color-css-for-button-radio-widget

Based on that I made some changes and got things working.

thanks for your amazing support!

Hi,

We're glad that you were able to find a workaround.

Let us know if you need further assistance. We are always happy to help.