checkbox美化

传统的checkbox表单元素是不好看的，而且每个浏览器表现出来的样式还不一样，很多时候我们会借助一些表单美化的插件实现类似开关切换的效果，有些是用 js+css 实现的，而有些则是纯CSS实现的，我们更应该感兴趣的是后者，今天我们就来一步一步实现一个CheckBox美化的效果

开始之前我们先搞清楚，要给CheckBox 的样式好像不太可行，所以需要借助label的for来间接触发 CheckBox的点击切换，而我们所有需要的美化效果只需要加到label上即可

首先定义HTML结构

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

外部是一个div容器用来包装整个 CheckBox ，包含不可缺少的 label 元素，然后设置未选中状态的label 样式

.mycheck label{
  display: inline-block;
  border: 1px solid #bdc3c7;
  border-radius: 60px;
  width: 60px;
  height: 30px;
  position: relative;
  transition: all .3s;
}
.mycheck input{
  display:none;
}
.mycheck label:before{
  width:20px;
  height:20px;
  content:'';
  display:inline-block;
  background-color:#bdc3c7;
  border-radius:100%;
  position:absolute;
  top:4px;
  left:4px;
  transition: all .3s;
}
.mycheck :checked ~ label{
  background-color:#26b22b;
  border-color:#26b22b;
}
.mycheck :checked ~ label:before{
  left:35px;
  background-color:#fff;
}

效果如下：

接下来我们可以尝试对将其封装成vue组件

<template>
  <div class="mycheck">
    <input type="checkbox" :id="id" />
    <label :for="id"></label>
  </div>
</template>

<script>
  export default {
    data(){
      id:`checkbox-${parseInt(Math.random()*10000)}`
    }
  }
</script>

<style scoped>
  .mycheck label{
    display: inline-block;
    border: 1px solid #bdc3c7;
    border-radius: 60px;
    width: 60px;
    height: 30px;
    position: relative;
    transition: all .3s;
  }
  .mycheck input{
    display:none;
  }
  .mycheck label:before{
    width:20px;
    height:20px;
    content:'';
    display:inline-block;
    background-color:#bdc3c7;
    border-radius:100%;
    position:absolute;
    top:4px;
    left:4px;
    transition: all .3s;
  }
  .mycheck :checked ~ label{
    background-color:#26b22b;
    border-color:#26b22b;
  }
  .mycheck :checked ~ label:before{
    left:35px;
    background-color:#fff;
  }
</style>

我们也可以用同样的方法对radio进行美化，关键点在于伪类 :checked 和动画 transition属性的灵活运用

猜你喜欢