Space Shuttle

Checkbox 自定义效果

发表于 | 分类于 ，
有的时候我们需要实现一些自定义的checkbox或者radio效果
基本的原理就是在原生的checkbox元素上层叠加一个自定义的checkbox 层，和label 的联动还是借助原生的checkbox，只不过把原生的样式都隐藏起来。
只要我们自定义的checkbox层正好和原生的重叠就行，再搭配一些交互效果，可以在不同浏览器中实现统一的样式。

实际效果如图

只需要纯CSS即可实现，不过本文用的 sass，基本原理一样，很简单。

首先看下HtmlTemplate 这块的结构，比较清晰，wrap 里面包含了我们自定义的div和原生的input checkbox.

1
2
3
4
5
6
7
<div :class="['checkbox-wrap']">
    <div :class="['checkbox-box', {'checkbox-box-disabled': disabled}]" >
      <div :class="['checkbox-inner',{'checkbox-check': checked}]" ></div></div>
    <input :id="cname" type="checkbox" :disabled="disabled"
      :class="['checkbox-base']" @change="onChange" v-model="checked" />
    <label :class="['checkbox-label']" :for="cname">{{label}}</label>
</div>

css 的关键在于自定义checkbox 和原生的位置重叠，以及利于伪类元素实现check 的一瞬间动效

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!-- 隐藏原生 checkbox -->
checkbox-base {
    opacity: 0;
    width: 20px;
    height: 16px;
}
checkbox { 
    &-box {
    <!-- check 对勾的容器 -->
      position: absolute;
      width: 19px;
      height: 19px;
      border: solid 1px gray;
      border-radius: 4px;
    }
    &-inner {
      position: absolute;
      top: 3px;
      left: 3px;
      width: 12px;
      height: 6px;
      opacity: 0;
      transform: rotateZ(-50deg) scale(0.1);
      transition: transform .1s ease-out;
    }
    &-check {
    <!-- 利用border来呈现对勾√ -->
      border-width: 0 0 2px 2px;
      opacity: 1;
      border-style: solid;
      border-color: $color-selected;
      transform: rotateZ(-50deg) scale(1);
      
    <!-- 在对勾后用伪类加个扩散动效 -->
      &::after {
        content: "";
        position: absolute;
        left: -6px;
        top: -6px;
        opacity: 0;
        width: 19px;
        height: 19px;
        border-radius: 50%;
        background: rgba(255, 100, 100, .2);
        animation: ripple .2s ease-out;
      }
      @keyframes ripple {
        0% {
          opacity: 1;
          transform: scale(0.0);
        }
        100% {
          opacity: 1;
          transform: scale(1.8);
        }
      }
    }
}

前人的想法还是挺巧妙的，奇巧淫技让我们的交互更加有趣。。这个交互的扩散效果灵感受到了Material Design 的一点影响。
Thanks for reading!