webforms - 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")