Changing Color of Radio Button using CSS

  • Profile Image
    Catalsyt
    Asked on June 02, 2020 at 05:08 PM

    Hello, 

    I tried to find the answer but could not. How do I change the color of the radio button using CSS? 

    Form: Roar Secure Contact Form

    Buttons: beside phone and email in the last section (circled in red on screenshot)


    Thanks!

    Screenshot
  • Profile Image
    Niko_N
    Answered on June 02, 2020 at 06:15 PM

    Greetings,

    Radio buttons consists of several components. Hence I will list here custom CSS code for changing colors of each part (I use red color for demo purposes).

    1) To change inner part's color use this CSS code:

    .form-radio-item:not(#foo) label:before {

    background: red !important;

    }

    2) To change inner part's border also, please include this code as well:

    .form-radio-item:not(#foo) label:before {

    border: 3px solid red !important;

    }

    3) To change outer part's color use this CSS code:

    .form-radio-item:not(#foo) label:after {

    background: red !important;

    }

    4) And also if you want to change outer part's border as well, include this CSS code as well:

    .form-radio-item:not(#foo) label:after {

    border: 3px solid red !important;

    }

    Related Guide:

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Please check and let us know if you have any further questions.

    Thank you in advance.