使用css更改asp:checkbox的样式/外观

我认为让复选框看起来真正不同的最好方法是根本不使用复选框控件。最好在超链接或图像元素顶部使用自己的图像作为选中/未选中状态。干杯。

与其使用一些非标准的控件,不如在事后使用非突兀的javascript。见 http://code.google.com/p/jquery-checkbox/ 举个例子。

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

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

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

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

你可以用那样的东西……希望有所帮助

为什么不将ASP.NET复选框按钮与Ajax控件工具包中提供的ToggleButtonexter一起使用呢?

当使用ASP.NET Web窗体和引导时,上面的任何一项都不能正常工作。

我最后使用了保罗警长的 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>

结果是…

不确定这真的是一个与ASP.NET相关的问题。试一试,这里有很多好信息:

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

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

例如,我的代码输出

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

哪里 检查框样式 是应用于控件的cssclass属性的值,并且 CBCHECKBOX 是控件的ID。

要设置输入样式,需要将CSS写入Target

span.CheckBox input {
  /* Styles here */
}

将此代码粘贴到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;
    }

他们真的依赖于浏览器。

也许你可以做一些类似于 this 关于更改文件浏览按钮的问题。