CSS自定义Checkbox 交互样式

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

只需要纯CSS即可实现，本文用的sass，原理一看就懂。

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

<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 的一瞬间动效

<!-- 隐藏原生 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 的一点启发。同样的实现思路可以推及其他需要自定义的原生HTML标签。

Thanks for reading !