Form elements - checkboxes / radiobuttons

Hi all,

while styling a form (and looking for a 'best practice' to apply to all the forms on every website we build), I was wondering if someone has a simple, easy way of styling checkbox-lists or radiobutton-lists.

When the inputs and the labels are vertically aligned (as a 'set'), it's almost impossible to keep the input and the label next to eachother, while applying some padding or margin at the bottom. Or maybe someone knows how to do this the easy way.

Wouldn't it be much more obvious to apply a container/parent to them? This container can be positioned inline (to align them horizontally) or as a block (vertically) and/or apply some styling to it, etc.

Thanks for reading. I hope this 'feature request' can be applied in a next release... For now I'm looking forward to any suggestions.

Regards,

Menno-Paul

Hi Menno,

Why would you add only margin-bottom to the radiobuttons or checkboxes? What is the use-case scenario? If you set the same top and bottom margins to those elements you will preserve the proper alignment. By default labels and radiobuttons/checkboxes are aligned at one level, so adding top and bottom margins won't change that.

Regards,
Jen Peleva
the Telerik team

Hi Jen,

Hi Menno,

If you wrap each checkbox or radiobutton with a wrapper tag, you will generate a big amount of html, which is not a good practice, when you can achieve the same result without additional tags.

All the best,
Jen Peleva
the Telerik team