Css 适用于 html 复选框控件，不适用于 asp.net 复选框控件

Question

我有这个应用了 CSS 的 html 复选框。

这是 jsFiddle。

JsFiddle

它工作得很好，问题是当我尝试将相同的 css 应用于 asp.net 复选框时，它不起作用。

这里是html输入控件的代码。

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

这是使用 asp.net 的代码。

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

但是当应用于 asp.net 复选框时它不起作用。

css 在 jsFiddle 上。

Answer 1

检查来自 ASP.NET 的呈现代码。您定义的 CssClass 被添加到输入和标签控件周围的包装器中。

所以你可以添加css规则来补偿:

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

或者您可以使用代码隐藏将类名分别附加到标签和输入控件:

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