Html 如何更改引导程序复选框的样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28768623/
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
How do you change the style of a bootstrap checkbox
提问by jsg
ive been looking on how to change the style of a bootstrap checkbox, and HAVE CHECKED THE OTHER ATTEMPTS! Made on here however every single attempt has not been successful, so is there a way to successfully change the style of a bootstrap check box or a normal checkbox.
我一直在研究如何更改引导程序复选框的样式，并检查了其他尝试！在这里进行但是每一次尝试都没有成功，所以有没有办法成功更改引导复选框或普通复选框的样式。
<label>text</label>
<input type="checkbox"/>
UPDATED
更新
回答by Ted
Here's a demo bootplyfor custom checkboxes that I use, implementing bootstraps glyphicons for the icons. These degrade to ordinary checkboxes in IE8 without any additional code.
这是我使用的自定义复选框的演示引导程序，为图标实现引导程序字形。这些降级为 IE8 中的普通复选框，无需任何额外代码。
Here's the relevant CSS:
这是相关的CSS：
.custom-checkbox > [type="checkbox"],
.custom-checkbox > label{
margin-bottom:0px !important;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.custom-checkbox > [type="checkbox"]:not(:checked),
.custom-checkbox > [type="checkbox"]:checked {
position: absolute;
left: -9999px;
}
.custom-checkbox > [type="checkbox"]:not(:checked) + label,
.custom-checkbox > [type="checkbox"]:checked + label {
position: relative;
padding-left: 22px;
cursor: pointer;
}
.custom-checkbox > [type="checkbox"]:not(:checked) + label:before,
.custom-checkbox > [type="checkbox"]:checked + label:before {
content: '';
position: absolute;
left:0;
top: 50%;
margin-top:-9px;
width: 17px;
height: 17px;
border: 1px solid #ddd;
background: #ffffff;
border-radius: 2px;
}
.custom-checkbox > [type="checkbox"]:not(:checked) + label:after,
.custom-checkbox > [type="checkbox"]:checked + label:after {
font: normal normal normal 12px/1 'Glyphicons Halflings';
content: '\e013';
position: absolute;
top: 50%;
margin-top:-7px;
left: 2px;
color: #94C947;
xtransition: all .2s;
}
.custom-checkbox > [type="checkbox"]:not(:checked) + label:after {
opacity: 0;
transform: scale(0);
}
.custom-checkbox > [type="checkbox"]:checked + label:after {
opacity: 1;
transform: scale(1);
}
.custom-checkbox > [type="checkbox"][data-indeterminate] + label:after,
.custom-checkbox > [type="checkbox"][data-indeterminate] + label:after {
content: '12';
left: 2px;
opacity: 1;
transform: scale(1);
}
.custom-checkbox > [type="checkbox"]:disabled:not(:checked) + label:before,
.custom-checkbox > [type="checkbox"]:disabled:checked + label:before {
box-shadow: none;
background-color: #eeeeee;
border-color: #eeeeee;
cursor: not-allowed;
opacity: 1;
color: #dadada;
}
.custom-checkbox > [type="checkbox"]:disabled:checked + label:after {
color: #dadada; cursor: not-allowed;
}
.custom-checkbox > [type="checkbox"]:disabled + label {
color: #aaa; cursor: not-allowed;
}
.custom-checkbox > [type="checkbox"]:checked:focus + label:before,
.custom-checkbox > [type="checkbox"]:not(:checked):focus + label:before {
border: 1px solid #66afe9;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.custom-checkbox > label:hover:before {
border: 1px solid #88D2FF !important;
}
.custom-checkbox > [type="checkbox"]:disabled:not(:checked) + label:hover:before,
.custom-checkbox > [type="checkbox"]:disabled:checked + label:hover:before{
border: 1px solid #E4E4E4 !important;
}
and the HTML:
和 HTML：
<div class="custom-checkbox">
<input type="checkbox" id="cb1">
<label for="cb1">Fancy Checkbox</label>
</div>
HTH, -Ted
HTH, -Ted
回答by ZEE
here is an expmle of how to style checkboxwithin bootstrap 3 :
这是如何checkbox在 bootstrap 3 中设置样式的示例：
label {
cursor: pointer;
}
div {
margin-bottom: 50px;
}
/* Checkbox */
input[type="checkbox"] {
/* IE opacity hacks */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
margin-left: 100px;
}
.cb-label {
position: relative;
}
.cb-label:before {
content: ' ';
position: absolute;
background: transparent url(http://blog.parkji.co.uk/images/posts/styling-checkboxes/switch.jpg) no-repeat scroll 0 0;
height: 41px;
width: 143px;
left: -150px
}
input[type="checkbox"]:checked ~ .cb-label:before,
/* the .checked class is used by IE only */
input[type="checkbox"].checked ~ .cb-label:before {
background-position: 0 -40px;
}
回答by user2394124
Maybe this is not exactly about the checkbox style, but you may consider using icons for each of checkbox state. For example http://fontawesome.io/icon/square-o/for not checked state and http://fontawesome.io/icon/check-square-o/for checked state. For AngularJs it might be something like this:
也许这并不完全是关于复选框样式，但您可以考虑为每个复选框状态使用图标。例如http://fontawesome.io/icon/square-o/表示未选中状态，http://fontawesome.io/icon/check-square-o/表示选中状态。对于 AngularJs，它可能是这样的：
<div ng-show="checked"><i class="fa fa-check-square-o" aria-hidden="true"></i></div>
<div ng-show="not-checked"><i class="fa fa-square-o" aria-hidden="true"></i></div>
