Question

我有这个带有css的html复选框。

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

Answer 2

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

例如，一个asp复选框：

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

可以使用范围呈现：

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

因为你可以看到具有classname而不是输入类型复选框的span。

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

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

只是说：

CheckBox1.CssClass

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

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

Answer 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

最好的问候。

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

3 个答案: