模拟 checkbox

原生的 checkbox 难以达到设计效果,又不想通过图片实现增强无谓的请求,唯有通过 css 来模拟了。

Step 1

准备以下一段 HTML:

<div class="beautify">
    <input type="checkbox" id="checkbox">
    <label for="checkbox"></label>
</div>

注意上面代码的结构,input 要在 label 之前,同时 label for 值要与 input id 保持一致。

Step 2

用 label 画出虚拟的 checkbox:

 .step2 label {
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #ccc;
}

Step 3

checkbox 被选中时应改变 label 的边框颜色和背景色:

.step3 input[type='checkbox']:checked + label {
  border-color: #669933;
  background-color: #669933;
}

TIP

:checked 是 css3 选择器,可以选择为 checked 状态的元素。

Step 4

选中的对勾可以通过伪元素实现:

.step4 input[type='checkbox']:checked + label:before {
  content: "";
  position: absolute;
  width: 14px;
  height: 6px;
  background: transparent;
  top: 8px;
  left: 6px;
  border: 3px solid #fff;
  border-top: none;
  border-right: none;
}

Step5

白勾是躺着的,可以用 css3 旋转给它换个姿势。

.step5 input[type='checkbox']:checked + label:before {
  transform: rotate(-45deg);
}

Step6

隐藏真正的 checkbox:

.step6 input[type='checkbox'] {
  -webkit-appearance: none; /*android*/
  position: absolute; /*iphone*/
  z-index: -1;
}

总结

本文只实现了一种效果,其实借助 CSS3 的 :checked 选择器可以实现很多种效果。

参考文章:

Last Updated: 7/16/2020, 11:24:55 PM