使用CSS和Bootstrap创建自定义复选框

Question

我使用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{}

谁有人建议解决方案？

Answer 1

背景图像复选框更换

让我们创造这个

这是使用一个非常简单的示例:before伪元件以及:checked和:hover的状态.

有了这个干净的HTML

<input type="checkbox" id="inputOne" />
<label for="inputOne"></label>

请注意匹配for和id属性,这会将标签附加到复选框.而且,元素的顺序非常重要; 标签必须在输入后出现,所以我们可以设置样式input:checked

以及这个Basic CSS

• 隐藏复选框,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>