Centering the dot inside the radio button

By: isak ellis | Asked: 08/19/2022
ForumsCategory: How-toCentering the dot inside the radio button
isak ellis asked 2 years ago

I don't know how to center the dot inside the radio button. I'm sure it's quite simple, but I haven't had any luck. Help?

It's on the form on this page.

Here's a link to a screenshot of my problem:

radio button








1 Answers
Best Answer
Victor Font answered 2 years ago
I've never seen anything like that before. You have to adjust the CSS for the inputs::before psuedo element to center the dot. You have to add this to Formidable's custom CSS. .with_frm_style .frm_radio input[type="radio"]::before { position: relative; top:-8px; right: 8px; }
Bobby Clapp replied 2 years ago

It's likely the theme doing something to it somehow. This worked for me.

.with_frm_style .frm_radio input[type=radio]:checked:before {
margin: -6px;

isak ellis replied 2 years ago

PERFECT! Both options work!

I have another Formidable Form with radio buttons on the website and they work fine. I'm sure there is a conflict somewhere, but I just couldn't find it or get my css right.

Many gracias to you both for the boost! Much appreciated.

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community