CSS 如何在 twitter bootstrap 中风格化输入复选框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15668360/
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 to stylize the input checkbox in twitter bootstrap?
提问by Cristiano Matos
I have to make a input checkbox simple but could not find some kind of optional class at bootstrap, also searched on github some library and could not find anything simple as making foundation.
我必须使输入复选框变得简单，但在引导程序中找不到某种可选类，也在 github 上搜索了一些库，但找不到任何简单的制作基础。
Thanks for help.
感谢帮助。
采纳答案by DextrousDave
Just add an id(if it is just one checkbox) or class to that input element and define css for it:
只需向该输入元素添加一个 id（如果它只是一个复选框）或类并为其定义 css：
CSS and HTML
CSS 和 HTML
'customId' would be the ID you give to the custom input tag:
'customId' 将是您提供给自定义输入标签的 ID：
<input id="customId" />
input#customId{
background: #888 !important;
border: none !important;
color: #000 !important;
}
jsut overwrite whatver styles you want to...
只需覆盖您想要的任何样式...
IMPORTANT: just add !important to the end of a style to force an override
重要提示：只需在样式末尾添加 !important 即可强制覆盖
回答by BernardV
You can play with this to get a sense of what can be done:
您可以使用它来了解可以做什么：
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
@import url(//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css');
input[type="checkbox"] {
display: none;
}
.custom-check {
display: inline-block;
width: 25px; height: 25px;
background: white;
border: 1px solid #CCCCCC;
font-family: 'Glyphicons Halflings';
font-size: 22px;
line-height: 1;
}
.custom-check::before {
content: "\e013";
color: #424242;
display: none;
}
input[type=checkbox]:checked+.custom-check::before {
display: block;
color: white;
background-color: #554236;
}<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<div>
<label >
<input type="checkbox">
<span class="custom-check"></span>
My Checkbox
</label>
</div>If that's not enough, this answerto a similar question also gives a good overview of the css involved in customizing the bootstrap checkbox.
如果这还不够，这个答案对一个类似问题也给参与定制引导复选框的CSS的一个很好的概述。
