[英]Creating a custom checkbox with CSS & Bootstrap
我使用bootstrap框架进行以下标记。
<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>
我想实现以下目标:
无论如何,使用CSS可以做到这一点吗?
我显然需要3个状态:
初始:
.custom-container input[type=checkbox]{}
悬停状态的某种形式:
.custom-container input[type=checkbox]:hover{}
选中后:
.custom-container input[type=checkbox]:checked{}
谁能提出解决方案?
这是一个非常简单的示例,它使用:before
伪元素以及:checked
和:hover
状态。
<input type="checkbox" id="inputOne" />
<label for="inputOne"></label>
注意匹配的for
和id
属性,这会将标签附加到复选框。 同样,元素的顺序也很重要。 标签必须位于输入之后,以便我们可以使用input:checked
样式
复选框被display: none
隐藏display: none
,所有交互都通过标签完成
给:after
伪元素一个unicode勾号( \\2714
),但这也可以用一个背景图像勾号。
边界半径引起的锯齿状边缘可以通过匹配的颜色box-shadow
来软化。 当背景图像不是纯色块时,边框的内部边缘看起来很好。
transition: all 0.4s
都会为边框创造平滑的淡入/淡出效果。
我在CSS注释中添加了更多指导。
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: '\\2714'; /*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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.