How to edit the color of the selected Radio Button option with Custom CSS?

  • Profile Image
    unruhfurniture
    Asked on November 27, 2017 at 08:58 AM

    I would love some help on two issues:

    1. I changed the Radio Box color to a Navy in the Advanced Designer and I made the buttons smaller, but it still won't apply to the form even after I saved it. I've noticed this delay in applying changes before from Advanced Designer. Is there a way to force a save & apply?

    2. I would like to shrink the margin between the free text field and the radio option (see attached)


    Thanks!

    Sam

  • Profile Image
    Richie_P
    Answered on November 27, 2017 at 09:34 AM

    Hi Sam,

    I have checked your form, you can advance edit custom css by using this guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Here is my css code to change the color and adjust the margin.


    .form-radio-item:not(#foo) label:after{
      background-color: #1c3c84;       /*you can change the color */
    }


    li#id_24.form-line{
      margin-top: -50px;/* you can change the margin height */
    }


    I hope this information helps you.

    Best Regards.

  • Profile Image
    unruhfurniture
    Answered on November 27, 2017 at 10:43 AM
    Thanks so much! All of those answers were super helpful. The only issue I
    am still having is the Advanced Designer won't apply my changes to the
    radio boxes. I attached a photo of what my advanced designer looks like
    compared to my form in preview mode. If you notice the Navy and smaller
    Radios are applied in the Advanced Designer but not in the Preview or Live
    Form. I hit Save in the Designer and it said it saved successfully.
    Thanks for the help!
    Sam
    *Sam Unruh*
    Owner, Unruh Furniture
    cell: 816.808.5259
    ...
  • Profile Image
    Welvin
    Answered on November 27, 2017 at 11:45 AM

    Please note that this support forum cannot accept email attachments. You have to access this thread and upload the images using our image tool. Here's a guide: https://www.jotform.com/help/438-How-to-Post-Screenshots-to-Our-Support-Forum.

    You missed the "dot" in the selector. You should copy/paste what my colleague has provided. I've fixed it for you. Please check again.

  • Profile Image
    unruhfurniture
    Answered on November 27, 2017 at 12:43 PM
    Thanks so much!
    *Sam Unruh*
    Owner, Unruh Furniture
    cell: 816.808.5259
    ...