Form Field Width for Radio Buttons

[sgraham28]

Hi,

I am trying to change the width for radio buttons without impacting the form field width for the dropdown menu.

https://info.95percentgroup.com/conference-evaluation-form-fy20

Currently when I update the width, it impacts the space between the Text for the Radio buttons (Yes/No) and where the buttons appear since it is connected with the form field width for the other fields on the form such as the dropdown menu.  

How can I isolate the Radio button width from the rest of the form fields?

Thanks in advance for the help!

[alyssamwilie]

You'll want :

body form.hs-form fieldset[class*="form-columns"] .hs-input[type="radio"]

Also, just a note, styling radio and checkbox buttons can be a little tricky. You'll want to be sure to add both a height and width or changing to a larger size won't work on some browsers (like Chrome); and some require a border to be set for some reason:

body form.hs-form fieldset[class*="form-columns"] .hs-input[type="radio"] {
    border: 1px solid;
    width: 20px;
    height: 20px;
}

Or you could just scale with CSS3's transform:

body form.hs-form fieldset[class*="form-columns"] .hs-input[type="radio"] {
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
    transform: scale(1.5);
}

Alyssa Wilie
Web Developer
LyntonWeb

[sgraham28]

Thank you!

Adding this worked:

body form.hs-form fieldset[class*="form-columns"] .hs-input[type="radio"] {
    border: 1px solid;
    width: 20px;
    height: 20px;
}