我使用引导框架进行了以下标记。
<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 个状态:
Initial:
.custom-container input[type=checkbox]{}
某种形式的悬停状态:
.custom-container input[type=checkbox]:hover{}
检查时:
.custom-container input[type=checkbox]:checked{}
有人能提出解决方案吗?
背景图像复选框替换
让我们创建这个
这是一个非常简单的例子,使用:before伪元素以及:checked and :hover
states.
有了这个干净的 HTML
<input type="checkbox" id="inputOne" />
<label for="inputOne"></label>
注意搭配for
and id
属性,这会将标签附加到复选框。此外,元素的顺序也非常重要;标签必须位于输入之后,以便我们可以使用样式input:checked
以及这个基本 CSS
-
该复选框被隐藏display: none
所有交互都是通过标签完成的
-
The :after
伪元素被赋予一个 unicode 刻度(\2714
)但这也可以用背景图像打勾。
-
由边框半径引起的锯齿状边缘可以通过匹配颜色来柔化box-shadow
。当背景图像不是纯色块时,边框的内边缘看起来很好。
-
The 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(https://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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)