ASP.Net checkbox missing CSS class

I have the following ASP.Net check box control added to a page:

<asp:CheckBox ID="chkActive" runat="server" CssClass="myClass" />

But when the page gets rendered it ignores the value of the CssClass property:

<input name="ctl00$mainContent$chkActive" id="ctl00_mainContent_chkActive" type="checkbox" value="on"/>

Any ideas how to apply the css class to the ASP.Net check box?

Thanks
Alan.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

I found a different answer to this, you can use the property

MyCheckBox.InputAttributes["class"] = "myClass";

to assign a class directly to an asp checkbox from the codebehind. Just noting this since I found this post through Google and the answer specified wouldn’t work for me.

Method 2

Ok, when you apply a CssClass to the ASP.Net check box control it applies the class to a span that wraps the check box. Because the css class isn’t applied directly to the element it doesn’t override the class that has been applied to all input elements.Therefore I used jQuery to select the element and apply the necessary style.

$("input[type=checkbox]").addClass("myClass");

Method 3

This post is quite old, but I’ll post my solution to help anyone coming from google (like me).

You can use the child selector > in jQuery, because the wrapping span has the CssClass that you specified, and one input child. In your code:

$('.myClass > input').addClass("myClass");

Method 4

You could wrap it in a span with a class.

Method 5

You can alos just set the css class like

    <asp:CheckBox ID="cbValittu" runat="server" Checked='<%# Eval("Valittu")%>' Class="checBoks" />

Css class can look something like:
.checBoks input
{
    width: 18px;
    height: 18px;
    vertical-align:middle;
}

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0