Need Help Hiding Native Radio Button Dot in Embedded Form

Hello,

I'm embedding a JotForm form on our website and using custom CSS to style the radio button fields to match our branding. While I've successfully styled the labels and layout, I'm still seeing the native blue radio dot appear when a selection is made — even after hiding the input with CSS (appearance: none, display: none, etc.).

I've tried every known workaround to suppress the dot, including:

• Overriding styles on .form-radio, .form-radio:checked, and related ::before and ::after pseudo-elements
• Applying appearance: none and hiding the input entirely
• Using opacity: 0, display: none, and pointer-events: none
• Targeting the rendered iframe from within an embedded CodePen environment

Despite all this, the blue dot still appears when a radio option is selected.

I've included a CodePen preview where you can see the issue live:

Could you please let me know how to reliably hide or fully suppress the native blue dot from the selected radio buttons?

Hi Catherine,

Thanks for reaching out to Jotform Support. You can hide the native blue dot from the selected radio button using injected custom CSS codes. Let me help you do that:

1. First, copy the following CSS code.

.form-radio:checked+label:after,

.form-radio:checked+span:after {

    visibility: hidden;

}

2. Then, 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.

You can also check out our guide about How to Inject Custom CSS Codes for more information. Check out also the screencast of the results on my test form below:

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

Hello,
I responded via email with this question on 3/27 , but I haven't gotten a response yet:
Thanks! I was able to add the code you sent and it's a big improvement. I did notice that the blue dot flashes for a split second when switching from one selection to another. Is there any way to hide that?
Catherine
(she/her)
fireballprinting.com ( http://fireballprinting.com/ )
Philadelphia
2644-48 Coral Street
P: 215 501 7155 F: 215 525 4481
...

Hi Catherine,

I understand the issue. Let me look into it and get back to you with a solution.

Hi Catherine,

I have new CSS code that will fulfil the requirements. Copy the following CSS code, and replace the previous code I provided.

/* 🎯 0. Hide blue dot circles */

.appointmentCalendar .calendarDay.isActive .calendarDayEach,

.appointmentCalendar .calendarDay::after,

.appointmentFieldRow.forSelectedDate,

.calendar.popup::after,

.calendar.popup tr.days td.selected::after,

.FITB_field_translation .FITB-dropdown li:hover,

.form-checkbox:checked+label::before,

.form-checkbox:checked+span::before,

.form-checkbox:checked+span label::before,

.form-line[data-payment="true"] .form-product-item .p_checkbox .checked,

.form-product-item.new_ui .form-product-details .payment-badge.sold-out-label,

.form-radio+label::after,

.form-radio+span::after,

.form-radio:checked+div label::after,

.form-radio:checked+span div::after,

.rating-item input:checked+label,

.rating-item input:focus+label,

.submit-button,

.supernova .btn-barebone:active,

.supernova .btn-barebone:hover,

.supernova .formPage-removePage:hover,

div#jfQuestion-proxy.forFullScreen[data-type="control_inline"] .FITB-dropdown li:hover,

li[data-type="control_inline"] .FITB-dropdown li:hover {

    visibility: hidden !important;

    opacity: 0 !important;

}

Here's the screencast of the result on my test form:

Give it a try and let us know if you need any more help.

Thanks, that's working well!
Catherine
(she/her)
fireballprinting.com ( http://fireballprinting.com/ )
Philadelphia
2644-48 Coral Street
P: 215 501 7155 F: 215 525 4481
...