Css爲html複選框控件工作，而不是爲asp.net複選框控件

我有這個HTML複選框與應用於它的CSS。Css爲html複選框控件工作，而不是爲asp.net複選框控件

這裏是的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上。

來源

2014-07-22 user3816931

您是否嘗試將css類應用於「CheckBox」控件的輸入元素？因此，您可以使用['CheckBox.InputAttributes']（http://msdn.microsoft.com/zh-cn/library/system.web.ui.webcontrols.checkbox.inputattributes（v = vs.110）.aspx） -property：'chkSemanal.InputAttributes [「class」] =「css-checkbox」'。 –

檢查ASP.NET呈現的代碼。您定義的CssClass被添加到輸入和標籤控件的包裝中。在

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

來源

2014-07-22 21:56:32 Malk

我在pageLoad中添加了這個，但現在我不能看到複選框。 chkSemanal.InputAttributes [「class」] =「css-checkbox」; chkSemanal.LabelAttributes [「class」] =「css-checklabel」; – user3816931

檢查開發人員工具中的渲染結果並修復它。如果沒有看到渲染結果，很難告訴你哪裏出了問題。也許你可以把渲染結果放到小提琴上。但海事組織，你應該使用第一種方法;你並不是真的想在你使用它的任何地方添加代碼！ – Malk

渲染結果爲： Semanal – user3816931

Web控件：

所以，你可以添加CSS規則來補償：

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

或者你也可以使用代碼後面的類名附加到標籤和輸入分別控制System.Web.UI.WebControls命名空間可能在不同的瀏覽器中呈現不同的效果。你不能指望它們始終呈現相同的元素。他們可能會添加任何他們認爲需要使其在特定瀏覽器中工作的內容。

例如，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屬性相同，可能會增加跨度。

希望這會有幫助，我之前遇到過這個問題，這是解決問題的方法之一。

來源

2014-07-22 22:01:45 SalemRady

我在頁面加載中添加了以下行，但是當我執行頁面時可見的所有內容都是複選框的標籤。 chkSemanal.InputAttributes.Add（「class」，「css-checkbox」）; – user3816931

由於提問者沒有提及他是如何得到它的工作，我將分享由@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>

此外，要防止風格回發後丟失，在頁面中。載入事件：

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

此致敬禮。

來源

2016-05-27 17:42:19

Css爲html複選框控件工作，而不是爲asp.net複選框控件

回答

相關問題