Form Field Width for Radio Buttons

sgraham28
Participant

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
0 Upvotes
2 Replies 2
amwilie
Key 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!

sgraham28
Participant

Thank you!

 

Adding this worked:

 

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