Remove the border color (on hover) and focus on radio buttons

Hi - what is the CSS to remove the border color (on hover) and focus on radio buttons?

Thanks,

Hi Erin,

Thanks for reaching out to Jotform Support. I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

Hi Erin,

I was able to customize the form and remove the border colors when hovered and focused. I've shared a screencast below on how it looks:

You can apply these changes by injecting CSS into your form. Let me show you how:

1. First, copy this code:

.form-radio:checked+label:before, .form-radio:checked+span:before, .form-radio:hover+label:before, .form-radio:hover+span:before {

    border-color: rgb(182, 188, 200);

    box-shadow: none;

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down, and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

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

Thanks, but the code didn't work.

Erin

Hi Erin,

You can use these CSS codes instead:

.form-radio:checked+label::before{

border: 0px transparent !important;

}

.form-radio:hover+label::before {

  box-shadow : 0px 0px 0px 0px transparent !important;

}

This is what it looks like after adding the CSS:

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

The blue border and the blue focus (blue dot in middle) are still showing - can I remove them entirely so it just fills with the orange color?

Thanks,

Erin

Hi Erin,

Could you try replacing the code in your form with the updated version below?

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

 background-color: #F06121; 

} 

.form-radio:hover+label::before {

 border-color: transparent !important;

  box-shadow : 0px 0px 0px 0px transparent !important;

  border-color: #2e69ff00 !important;

}

.form-radio+label:after {

 background: transparent !important;

}

.form-radio+label:before {

  box-shadow: none !important;

  border-color: #2e69ff00 !important;

  border: 0 !important;

}

Take a look at the screencast of the result below:

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

thanks..

closer, but I don't want to lose the grey circle border indicating it's a radio button that needs to be filled -

Erin

Hi Erin,

I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

Hi Erin,

I was able to check your form and apply the changes to my cloned form. It should look like what you see on the screencast below:

You can apply these changes by Injecting CSS Codes into your form. Let me walk you through it:

1. First, copy this code:

.form-radio:checked+label:before, .form-radio:checked+span:before, .form-radio:hover+label:before, .form-radio:hover+span:before {

    border-color: rgb(182, 188, 200) ! IMPORTANT;

    box-shadow: none ! IMPORTANT;

}

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

    background-color: rgb(182, 188, 200) ! IMPORTANT;

}

.form-radio:checked+label:after {

    background: #F06121 ! IMPORTANT;

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down, and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

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

That worked - thanks!

Erin