Html 使用 CSS 和 Bootstrap 创建自定义复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26531642/
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
Creating a custom checkbox with CSS & Bootstrap
提问by cwiggo
I have the following mark-up using the bootstrap framework.
我使用引导程序框架进行了以下标记。
<div class="col-md-4">
<div class="custom-container">
<img class="center-block img-responsive img-circle invite-contact-trybe" src="{$img}" alt="Contact Image">
<input class="invite-contact-checkbox" type="checkbox">
</div>
</div>
I would like to achieve the following:
我想实现以下目标：
Is there anyway to do this using CSS?
有没有办法使用CSS来做到这一点？
I would obviously need 3 states:
我显然需要 3 个状态：
Initial:
最初的：
.custom-container input[type=checkbox]{}
Some form of hover state:
某种形式的悬停状态：
.custom-container input[type=checkbox]:hover{}
When it is checked:
检查时：
.custom-container input[type=checkbox]:checked{}
Can anyone suggest a solution?
任何人都可以提出解决方案吗？
回答by misterManSam
Background image checkbox replacement
背景图像复选框替换
Let's create this
让我们创造这个
This is a very simple example using a :beforepseudo element as well as :checkedand :hoverstates.
这是使用一个非常简单的示例:before伪元件以及:checked和:hover的状态。
With this clean HTML
使用这个干净的 HTML
<input type="checkbox" id="inputOne" />
<label for="inputOne"></label>
Note the matching forand idattributes, this attaches the label to the checkbox. Also, the order of elements is very important; the label must come after the input so we can style with input:checked
注意匹配for和id属性，这会将标签附加到复选框。此外，元素的顺序非常重要；标签必须在输入之后，以便我们可以设置样式input:checked
As well as this Basic CSS
以及这个 Basic CSS
The checkbox is hidden with
display: noneand all interaction is done with the labelThe
:afterpseudo element is given a unicode tick (\2714) but this could also be ticked with a background image.The jagged edge caused by the border-radius can be softened by a matching color
box-shadow. The inside edge of the border looks fine when the background image is not a solid block of color.The
transition: all 0.4screates a smooth fade in / out for the border.
复选框被隐藏，
display: none所有交互都通过标签完成所述
:after伪元件被给予一个unicode蜱（\2714），但是这也可以用一个背景图像打勾。由 border-radius 引起的锯齿状边缘可以通过匹配的颜色来柔化
box-shadow。当背景图像不是纯色块时，边框的内边缘看起来不错。该
transition: all 0.4s用于边框将在/平滑淡出。
I have added more guidance in CSS comments.
我在 CSS 注释中添加了更多指导。
Complete Example
完整示例
input[type=checkbox] {
display: none;
}
/*
- Style each label that is directly after the input
- position: relative; will ensure that any position: absolute children will position themselves in relation to it
*/
input[type=checkbox] + label {
position: relative;
background: url(http://i.stack.imgur.com/ocgp1.jpg) no-repeat;
height: 50px;
width: 50px;
display: block;
border-radius: 50%;
transition: box-shadow 0.4s, border 0.4s;
border: solid 5px #FFF;
box-shadow: 0 0 1px #FFF;/* Soften the jagged edge */
cursor: pointer;
}
/* Provide a border when hovered and when the checkbox before it is checked */
input[type=checkbox] + label:hover,
input[type=checkbox]:checked + label {
border: solid 5px #F00;
box-shadow: 0 0 1px #F00;
/* Soften the jagged edge */
}
/*
- Create a pseudo element :after when checked and provide a tick
- Center the content
*/
input[type=checkbox]:checked + label:after {
content: '14';
/*content is required, though it can be empty - content: '';*/
height: 1em;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
color: #F00;
line-height: 1;
font-size: 18px;
text-align: center;
}<input type="checkbox" id="inputOne" />
<label for="inputOne"></label>