help styling radio buttons

[johndove523]

Please see attached gif and url: http://informaticseducation.org/inst...lication-form/

I think I need to create a new style (as not to affect all the other text inputs) to style these radio buttons correctly, which is:

[button first, then] label (directly adjacent to the right)

e.g., • Undergraduate • Graduate • Both • Other

Any help is appreciated. Thanks,

John

[VIPStephan]

You just need to remove display: list-item and width: 300px from span.wpcf7-form-control-wrap input. Or rather, only apply the width to text inputs. You can use the attribute selector ([type=text]) or a specific class selector that is added to these inputs.

[Johnb21]

Originally Posted by VIPStephan

You just need to remove display: list-item and width: 300px from span.wpcf7-form-control-wrap input. Or rather, only apply the width to text inputs. You can use the attribute selector ([type=text]) or a specific class selector that is added to these inputs.

except he doesn't have control over those because those styles are built into the wordpress contact form 7 plugin. He would need to add styles to his own stylesheet that would override those.

Also, even if he were to remove them... it would not give him a vertical list of radio buttons rather a horizontal list.

The best way to achieve what you are looking to do is use this code in your own CSS stylesheet:

 span.wpcf7-list-item input[type="radio"]{
 display:inline;width:auto;
}

 span.wpcf7-list-item label{display:block;}

This code has been tested with your layout using the Web Developer Toolbar.

[Johnb21]

Apparently he is looking for an inline radio list... from the "before" layout, I figured he wanted to have them vertically laid out like they were just lined up and with the label on the right side.

[johndove523]

Thank you! : )