使用 CSS 更改 Asp:CheckBox 的样式/外观
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/112883/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change Style/Look of Asp:CheckBox using CSS
提问by JamesSugrue
I want to change the standard "3D" look of the standard asp.net checkbox to say solid 1px. If I try to apply the styling to the Border for example it does just that - draws the standard checkbox with a border around it - which is valid I guess.
我想将标准 asp.net 复选框的标准“3D”外观更改为纯 1px。例如，如果我尝试将样式应用于边框，它就是这样做的 - 绘制带有边框的标准复选框 - 我猜这是有效的。
Anyway, is there a way to change how the actual textbox is styled?
无论如何，有没有办法改变实际文本框的样式？
采纳答案by dimarzionist
I think the best way to make CheckBox looks really different is not to use checkbox control at all. Better use your own images for checked/unchecked state on-top of hyperlink or image element. Cheers.
我认为让 CheckBox 看起来真正不同的最好方法是根本不使用复选框控件。最好在超链接或图像元素顶部使用您自己的图像进行选中/未选中状态。干杯。
回答by gregmac
Rather than use some non-standard control, what you should be doing is using un-obtrusive javascript to do it after the fact. See http://code.google.com/p/jquery-checkbox/for an example.
与其使用一些非标准控件，您应该做的是在事后使用不引人注目的 javascript 来完成它。有关示例，请参阅http://code.google.com/p/jquery-checkbox/。
Using the standard ASP checkbox simplifies writing the code. You don't have to write your own user control, and all your existing code/pages don't have to be updated.
使用标准的 ASP 复选框可以简化代码的编写。您不必编写自己的用户控件，也不必更新所有现有的代码/页面。
More importantly, it is a standard HTML control that all browsers can recognize. It is accessible to all users, and work if they don't have javascript. For example, screen readers for the blind will be able to understand it as a checkbox control, and not just an image with a link.
更重要的是，它是所有浏览器都能识别的标准 HTML 控件。所有用户都可以访问它，如果他们没有 javascript 也可以工作。例如，盲人的屏幕阅读器将能够将其理解为复选框控件，而不仅仅是带有链接的图像。
回答by purdueduck
Simplest best way, using the ASP checkbox control with custom design.
最简单的最佳方法，使用具有自定义设计的 ASP 复选框控件。
chkOrder.InputAttributes["class"] = "fancyCssClass";
you can use something like that.. hope that helps
你可以使用类似的东西..希望有帮助
回答by cymorg
None of the above work well when using ASP.NET Web Forms and Bootstrap.
当使用 ASP.NET Web Forms 和 Bootstrap 时，以上都不能很好地工作。
I ended up using Paul Sheriff's Simple Bootstrap CheckBox for Web Forms
我最终使用了 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>
The result looks like this...
结果看起来像这样......
回答by dizad87
paste this code in your css and it will let you customize your checkbox style. however, it's not the best solution, it's pretty much displaying your style on top of the existing checkbox/radiobutton.
将此代码粘贴到您的 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;
}
回答by user392892
Why not use Asp.net CheckBox button with ToggleButtonExtender available from the Ajax control toolkit.
为什么不将 Asp.net CheckBox 按钮与 Ajax 控件工具包中提供的 ToggleButtonExtender 一起使用。
回答by Dexter
Keep in mind that the asp:CheckBoxcontrol actually outputs more than just a single checkbox input.
请记住，asp:CheckBox控件实际上输出的不仅仅是单个复选框输入。
For example, my code outputs
例如，我的代码输出
<span class="CheckBoxStyle">
<input id="ctl00_cphContent_cbCheckBox"
name="ctl00$cphContent$cbCheckBox"
type="checkbox">
</span>
where CheckBoxStyleis the value of the CssClass attribute applied to the control and cbCheckBoxis the ID of the control.
其中CheckBoxStyle是应用于控件的 CssClass 属性的值，cbCheckBox是控件的 ID。
To style the input, you need to write CSS to target
要设置输入的样式，您需要编写 CSS 来定位
span.CheckBox input {
/* Styles here */
}
回答by Ian P
Not sure that it's really an asp.net related question.. Give this a shot, lots of good info here:
不确定它是否真的是一个与 asp.net 相关的问题..试一试，这里有很多好的信息：
http://www.456bereastreet.com/archive/200409/styling_form_controls/
http://www.456bereasttreet.com/archive/200409/styling_form_controls/
