版权声明:本文为博主(风轻云淡)原创文章,未经博主允许不得转载。CSDN https://blog.csdn.net/qq_20343517/article/details/84231958
传统的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属性的灵活运用