user3816931 user3816931 - 6 months ago 108
CSS Question

Css works for html checkbox control and not for asp.net checkbox control

I have this html checkbox with css applied to it.

Here is the jsFiddle.

JsFiddle

It works perfectly , the problem is when i am trying to apply the same css to asp.net checkbox, it is not working.

Here is the code for html input control.

<input type="checkbox" name="chkReservaSemanal" id="chkReservaSemanal" class="css-checkbox" runat="server" /><label for="chkReservaSemanal" class="css-label">Week</label>


And here is the code with asp.net.

<asp:CheckBox ID="chkSemanal" runat="server" AutoPostBack="True" OnCheckedChanged="chkSemanal_CheckedChanged1" CssClass="css-checkbox"/>


But when applied to asp.net checkbox it is not working.

The css is on the jsFiddle.

Answer

Check the rendered code from ASP.NET. The CssClass that you define is added to a wrapper around the input and label controls.

So you can add css rules to compensate:

input[type=checkbox].css-checkbox,
.css-checkbox input[type=checkbox] { ... }

Or you can use code behind to attach the class names to the label and input controls separately:

chkSemanal.InputAttributes["class"] = "css-checkbox";
chkSemanal.LabelAttributes["class"] = "css-checklabel";