Customizing Button Radio Widget

  • Profile Image
    aronfrand
    Asked on February 08, 2021 at 11:12 AM

    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?

  • Profile Image
    Bojan_J
    Answered on February 08, 2021 at 12:37 PM

    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:

    screenshot_3669.png

    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.

  • Profile Image
    aronfrand
    Answered on February 08, 2021 at 12:43 PM

    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

  • Profile Image
    Bojan_J
    Answered on February 08, 2021 at 02:29 PM

    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.

  • Profile Image
    aronfrand
    Answered on February 08, 2021 at 03:00 PM

    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.

    1612814358_6021981605344_Screenshot 2021

  • Profile Image
    Jovanne_A
    Answered on February 08, 2021 at 07:17 PM

    Hi,

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

    1612829801_6021d469bf51a_6.gif

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

    We look forward to your response.

  • Profile Image
    aronfrand
    Answered on February 08, 2021 at 07:31 PM

    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!

  • Profile Image
    Jovanne_A
    Answered on February 08, 2021 at 07:33 PM

    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.