user3816931 user3816931 - 1 year ago 224
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.

Answer Source

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