CODEWITHSUNDEEP
formsyui-pure-css
jester66
jester66

Reputation: 243

Styling a Radio Button Group using the purecss.io framework

The other day I stumbled on the Pure project - a set of CSS modules released by the YUI team. I wanted to standardize the forms across my website and I liked the look of their forms module. Especially the style of form they call the Aligned Form. I added the CSS to my site and added the needed styles to my form and it all worked well except for my group of radio buttons. In the Aligned Form each input has a label on the left side and the input to the right of it's label. But individual Radio Buttons have individual labels - which get styled to the right of the button. What I'm looking for is a way to add an overall label for the group of buttons that is styled to the left and centered.

I did find a workaround, but I'm looking more for a dedicate "Pure" way of doing it.

My workaround was to include the radios within a fieldset, and use the legend of the fieldset as the label for the radio group.

I'd enjoy hearing from others who work with Pure Aligned Forms to see how you handled this.

Upvotes: 2

Views: 569

Answers (1)

theadamattack
theadamattack

Reputation: 25

Your question is a little vague I think. If what you are trying to achieve is something like this,

Label
  radio
  radio
  radio

then the way you did it (what you call your "workaround") is actually the best way to do this. Fieldsets are meant for grouping items together and you can use the legend as the label.

However, if you are trying to do something like this,

       radio
Label  radio
       radio

then you are going to want to use floating divs (one to hold your label and another to group your radio buttons).

I can't really get more specific without knowing what your code looks like and what you are specifically going for...

Upvotes: 0

Related Questions