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

【问题标题】：Css works for html checkbox control and not for asp.net checkbox controlCss 适用于 html 复选框控件，不适用于 asp.net 复选框控件
【发布时间】：2014-09-13 22:16:55
【问题描述】：

我有这个带有 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 上。

【问题讨论】：

您是否尝试将 css-class 应用于 CheckBox-control 的输入元素？因此您可以使用CheckBox.InputAttributes-property：chkSemanal.InputAttributes["class"] = "css-checkbox"。

标签： css asp.net checkbox

【解决方案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";

【讨论】：

我在 pageLoad 中添加了这个，但现在我看不到复选框。 chkSemanal.InputAttributes["class"] = "css-checkbox"; chkSemanal.LabelAttributes["class"] = "css-checklabel";
在开发者工具中查看渲染结果并修复。在没有看到渲染结果的情况下很难告诉你出了什么问题。也许您可以将渲染结果放入小提琴中。但是IMO，您应该使用第一种方法；您真的不想在使用它的任何地方添加代码！
渲染结果为： Semanal跨度>
请注意，渲染结果显示的是 <span> 而不是 <label>（这是 CSS 所期望的）。这个跨度是来自<asp:CheckBox> 控件的Text 属性，还是您的复选框旁边有一个明确的<asp:Label>？ ...在您的小提琴中，如果您将跨度更改为标签并给它一个 css-label 类，它会按预期工作。
Malk 它不起作用，因为当您单击它时，它不会改变任何东西。这是 jsFiddle，无论如何我不能让它呈现一个标签，我不能吗？ jsfiddle.net/aPN5A

【解决方案2】：

System.Web.UI.WebControls 命名空间中的 Web 控件在不同浏览器中的呈现方式可能不同。你不能指望他们总是渲染相同的元素。他们可能会添加任何他们认为需要使其在特定浏览器中运行的内容。

例如，一个 asp 复选框：

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

可以用跨度渲染：

<span class="myClass"><input id="CheckBox1"    type="checkbox" /></span>

如您所见，具有类名而不是输入类型复选框的是跨度。

根据需要渲染它的最佳方法是使用：

CheckBox1.InputAttributes.Add("class", "myCheckBoxClass")

只想说：

CheckBox1.CssClass

将呈现与添加 CssClass 属性相同的方式，并且可以添加跨度。

希望这会有所帮助，我以前遇到过这个问题，这是解决它的方法之一。

【讨论】：

我在页面加载中添加了以下行，但是当我执行页面时，所有可见的都是复选框的标签。 chkSemanal.InputAttributes.Add("class", "css-checkbox");

【解决方案3】：

由于提问者没有提到他是如何工作的，我将分享@MALK建议的解决方案：

<span class="css-checkbox">
<asp:CheckBox ID="CheckBox1" runat="server" />
<asp:Label ID="Label2" runat="server" Text="Click me!" CssClass="css-label" AssociatedControlID="CheckBox1"></asp:Label>
</span>

为了防止在 PostBack 后样式丢失，在 Page.Load 事件中：

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load        
    Me.CheckBox1.InputAttributes("class") = "css-checkbox"
    Me.CheckBox1.LabelAttributes("class") = "css-checklabel"        
End Sub

最好的问候。

【讨论】：