使用 CSS 更改 Asp:CheckBox 的样式/外观

Posted 2023-03-05

【中文标题】使用 CSS 更改 Asp:CheckBox 的样式/外观

【英文标题】：Change Style/Look of Asp:CheckBox using CSS

【发布时间】：2010-09-11 21:21:51

【问题描述】：

我想将标准 asp.net 复选框的标准“3D”外观更改为实心 1px。例如，如果我尝试将样式应用于边框，它就会这样做 - 绘制带有边框的标准复选框 - 我猜这是有效的。

无论如何，有没有办法改变实际文本框的样式？

【参考方案1】：

与其使用一些非标准控件，不如在事后使用不显眼的 javascript 来完成。有关示例，请参阅http://code.google.com/p/jquery-checkbox/。

使用标准的 ASP 复选框可以简化代码的编写。您不必编写自己的用户控件，也不必更新所有现有代码/页面。

更重要的是，它是所有浏览器都能识别的标准html控件。所有用户都可以访问它，如果他们没有 javascript，也可以使用它。例如，盲人的屏幕阅读器将能够将其理解为复选框控件，而不仅仅是带有链接的图像。

【参考方案2】：

我认为让 CheckBox 看起来与众不同的最佳方法是根本不使用复选框控件。更好地使用您自己的图像在超链接或图像元素顶部进行选中/未选中状态。干杯。

【讨论】：

我得出的结论也差不多！

可用性和渐进式增强，去年真是太棒了...... :(

【参考方案3】：

在使用 ASP.NET Web 窗体和 Bootstrap 时，上述方法都不能正常工作。

我最终使用了 Paul Sheriff 的 Simple Bootstrap CheckBox for Web Forms

<style>
    .checkbox .btn, .checkbox-inline .btn 
    padding-left: 2em;
    min-width: 8em;
    
    .checkbox label, .checkbox-inline label 
    text-align: left;
    padding-left: 0.5em;
    
    .checkbox input[type="checkbox"]
        float:none;
    
</style>


<div class="form-group">
    <div class="checkbox">
        <label class="btn btn-default">
            <asp:CheckBox ID="chk1" runat="server" Text="Required" />
        </label>
    </div>
</div>

结果如下所示...

【参考方案4】：

最简单的最佳方式，使用带有自定义设计的 ASP 复选框控件。

 chkOrder.InputAttributes["class"] = "fancyCssClass";

你可以使用类似的东西..希望有帮助

【讨论】：

从代码隐藏中向元素添加一个类，但它如何设置实际框的样式？

【参考方案5】：

将此代码粘贴到您的 CSS 中，它可以让您自定义复选框样式。但是，这不是最好的解决方案，它几乎是在现有的复选框/单选按钮之上显示您的样式。

   input[type='checkbox']:after 


        width: 9px;
        height: 9px;
        border-radius: 9px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: #3B8054;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 3px solid #3B8054;
        transition: 0.5s ease;
        cursor: pointer;



input[type='checkbox']:checked:after 
    
        background-color: #9DFF00;
    

【讨论】：

我在小提琴中试过这个没有用：jsfiddle.net/g5rLxc9k

【参考方案6】：

为什么不使用带有 Ajax 控件工具包中的 ToggleButtonExtender 的 Asp.net CheckBox 按钮。

【讨论】：

您的建议对我有用。按照这个例子。 ajaxcontroltoolkit.net/ToggleButton/ToggleButton.aspx

【参考方案7】：

不确定这真的是一个与 asp.net 相关的问题。试一试，这里有很多很好的信息：

http://www.456bereastreet.com/archive/200409/styling_form_controls/

【参考方案8】：

请记住，asp:CheckBox 控件实际上输出的不仅仅是一个复选框输入。

比如我的代码输出

<span class="CheckBoxStyle">
    <input id="ctl00_cphContent_cbCheckBox" 
           name="ctl00$cphContent$cbCheckBox"
           type="checkbox">
</span>

其中CheckBoxStyle是应用于控件的CssClass属性的值，cbCheckBox是控件的ID。

要设置输入样式，您需要编写 CSS 到目标

span.CheckBox input 
  /* Styles here */

【参考方案9】：

它们确实依赖于浏览器。

也许你可以做类似于this question about changed the file browse button中的答案。

【参考方案10】：

好吧，我尝试了所有我能找到的解决方案。

Ajax 控制工具包可以工作，但它会创建一个奇怪的 html 输出，其中包含各种跨度和其他难以使用的样式。

使用带有::before 标记的css 样式来隐藏原始控件的框是可行的，但是如果您将runat=server 放入元素中以使其可供隐藏的代码访问，则复选框不会更改值，除非您确实点击原控件。

在某些方法中，如果文本对于查看屏幕来说太长，则标签的整行会在复选框下方结束，或者会在复选框下方结束。

最后，（在此页面中@dimarzionist 的回答中）我使用了 asp.net ImageButton 并使用代码隐藏来更改图像。通过这个解决方案，我可以很好地控制样式，并且可以确定是否从代码隐藏中选中了该框。

<asp:ImageButton ID="mycheckbox" CssClass="checkbox"  runat="server" OnClick="checkbox_Click" ImageUrl="unchecked.png" />
<span class="checkboxlabel">I have read and promise to fulfill the <a href="/index.aspx">rules and obligations</a></span>

在代码隐藏中

    protected void checkbox_Click(object sender, ImageClickEventArgs e) 
        if (mycheckbox.ImageUrl == "unchecked.png") 
            mycheckbox.ImageUrl = "checked.png";
            //Do something if user checks the box
         else 
            mycheckbox.ImageUrl = "unchecked.png";
            //Do something if the user unchecks the box
        
    

更重要的是，使用这种方法，您用于复选框文本的<span> 将与复选框完美换行。

.checkboxlabel
    vertical-align:middle;
    font-weight: bold;

.checkbox
    height: 24px;  /*height of the checkbox image*/
    vertical-align: middle;