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 !