Why does ASP.Net RadioButton and CheckBox render inside a Span?

Question

I would expect this:

<asp:CheckBox    ID="CheckBox1"    runat="server" CssClass="myClass" /> <asp:RadioButton ID="RadioButton1" runat="server" CssClass="myClass" /> <asp:TextBox     ID="TextBox1"     runat="server" CssClass="myClass" /> 

...to render like this (with some attributes removed for simplicity):

<input id="CheckBox1"    type="checkbox" class="myClass" /> <input id="RadioButton1" type="radio"    class="myClass" /> <input id="TextBox1"     type="text"     class="myClass" />  

...when in fact, the RadioButton and CheckBox get wrapped with a span tag and the CSS class gets applied there.

<span class="myClass"><input id="CheckBox1"    type="checkbox" /></span>  <span class="myClass"><input id="RadioButton1" type="radio"    /></span>  <input type="text" id="TextBox1" class="myClass" />  

Is there a reason for this and is there a way to avoid it? It makes jQuery selectors ugly since you can't catch all of them with:

$("input.myClass") 

Granted it is just going to:

$("input.myClass, span.myClass input") 

...but that is ugly. I could write my own selector, but again not as elegant as it should be.

Answer 1

This was driving me crazy too until I found the inputAttributes property.

For example, here is how to add a class directly on the checkbox control without the span nonsense:

myCheckBoxControl.InputAttributes.Add("class", "myCheckBoxClass") 

Answer 2

Web controls in the System.Web.UI.WebControls namespace may render differently in different browsers. You can't count on them rendering the same elements always. They may add anything that they think is needed to make it work in the specific browser.

If you want to have any control over how the controls are rendered as html, you should use the controls in the System.Web.UI.HtmlControls namespace instead. That is:

<input type="checkbox" id="CheckBox1" runat="server" class="myClass" /> <input type="radio" name="RadioButton1" runat="server" class="myClass" /> <input type="text" id="TextBox1" runat="server" class="myClass" /> 

They will render just as the corresponding html element, with no extra elements added. This of course means that you will have to take responsibility for the browser compatibility, as the control doesn't. Also, those controls doesn't have all the features of the controls in the WebControls namespace.