CSS - Align radio buttons vertically

My hope: If you raise the font from the designer menu, the radio button is also leveled automatically

thx

https://form.jotform.com/242487399863476

Hi dataumo2024,

Thanks for reaching out to Jotform Support. After a little bit of testing, I manage to put together a bit of CSS that looks like this in my cloned form at Font Size 20px:

When changing the Font Size in Form Builder, the radio button automatically adjusts to the height of the characters. Here's my clone with Font Size set to 40px:

Adding the CSS is simple. Let me show you how to do it:

1. Copy the code below:

/* Radio button vertical alignment - 18776911 */

.form-radio+label:before{

    position: absolute;

    top: 50% !important;

    transform: translate(0, -50%);

}

.form-radio+label{

    position: relative;

    font-size: .9375em !important;

    padding-top: 0 !important;

}

/* 18776911 End here */

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

3. In the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box.

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

Hello.

I checked your CSS code, and I inserted it

But my radio button doesn't change.

(The font is also set to 40PX)

What more should I do?

Thank you.

Hi dataumo2024,

Can you publish the form and view it there? There are instances the inserted CSS code don't reflect on the form builder so you will need to see the form published to view its effect. But I noticed that in your current settings, the selected item shows a bit off:

This can be fixed by adding this CSS code at the bottom of your injected CSS codes:

.form-radio+label:after, .form-radio+label div:after, .form-radio+span:after, .form-radio+span div:after {

    top: 12px;

    left: 3px;

    width: 14px;

    height: 14px;

    content: "";

    position: absolute;

    border-radius: 50%;

Once added, you can publish the form and see the results like this:

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

Perfect. The first radio button is solved.

Hi dataumo2024,

As for your other question, I've moved that to a new thread. You can check that out here.

Let us know if there's anything else we can help you with.