Form Field Width for Radio Buttons

Highlighted
Occasional Contributor

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?

 

HubSpot Form Snippet.PNG

 

Thanks in advance for the help!

CSS
Reply
0 Upvotes
2 Replies 2
Highlighted
Advisor | Elite Partner

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

 

Alyssa Wilie

Web Developer at LyntonWeb

If this answer solved your question, please mark it as the solution!

Highlighted
Occasional Contributor

Thank you!

 

Adding this worked:

 

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