controlling how ASP.NET renders radio button lists in HTML

Question

When I add ListItems to a RadioButtonList in code-behind, the labels are rendered after the input and placed inside a TD by ASP.NET.

     <td>
         <input type='radio' id='site123' name='groupname' value='123' />
         <label for = 'site123'>this is a long label that wraps</label>
     </td>

Is there a way to control how ASP.NET renders the markup, either selectively or globally? I'd like to have the input inside the label:

       <label><input .... /> </label>

In terms of best practices, you are limited to the many properties that are offered as part of the RadioButtonList class. What type of layout are you trying to achieve? If the properties aren't sufficient for you, you can use the CssClass property to specify a CSS class defining style attributes to use. — thesentiment, Jan 12 '15 at 18:42
I'm trying to style the label of the chosen item, and the examples of the CSS that I've found so far assume the label contains the input. — Tim, Jan 12 '15 at 18:43
Do you mean something like this? http://runnable.com/VLQawyfc2FpMEHOS/radiobuttonlist-label-formatting-for-net I guess I'm having trouble understanding why you absolutely need the input inside the label. — thesentiment, Jan 12 '15 at 19:00

score 1 · Accepted Answer · edited May 23 '17 at 11:50

You can use a Control Adapter. They allow you to override the html rendering of any ASP.Net control. Aside from the link, I have a simple example in another question here:

Dropdownlist control with <optgroup>s for asp.net (webforms)?

Since you asked about doing this selectively, you would need to inherit a control from RadioButtonList, and then attach your control adapter to the inherited control, instead of RadioButtonList itself.

controlling how ASP.NET renders radio button lists in HTML

1 Answers1