user3816931 user3816931 - 7 months ago 132
CSS Question

Css works for html checkbox control and not for checkbox control

I have this html checkbox with css applied to it.

Here is the jsFiddle.


It works perfectly , the problem is when i am trying to apply the same css to 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:CheckBox ID="chkSemanal" runat="server" AutoPostBack="True" OnCheckedChanged="chkSemanal_CheckedChanged1" CssClass="css-checkbox"/>

But when applied to checkbox it is not working.

The css is on the jsFiddle.


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:

.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";