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

StackOverflow https://stackoverflow.com/questions/112883

  •  02-07-2019
  •  | 
  •  

题

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

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

有帮助吗？

解决方案

我认为使CheckBox看起来真正不同的最好方法是根本不使用复选框控件。更好地使用您自己的图像在超链接或图像元素的顶部检查/取消选中状态。欢呼声。

其他提示

与其使用某些非标准控件，您应该做的是使用非突兀的javascript来实现它。请参阅 http://code.google.com/p/jquery-checkbox/ 举个例子。

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

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

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

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

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

为什么不使用Asp.net CheckBox按钮和Ajax控件工具包提供的ToggleButtonExtender。

使用ASP.NET Web窗体和Bootstrap时，上述任何一项都无法正常工作。

我最终使用了Paul Sheriff的简单Web窗体的Bootstrap CheckBox 

<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/

请记住， 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 */
}

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

他们真的依赖浏览器。

也许你可以在这个关于更改文件浏览按钮的问题。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top