如何用input checkbox实现按钮开关样式？

input checkbox实现按钮开关样式

1.给input清空默认样式和设置按钮基本样式(class=“switch”)

​        input[type=checkbox].switch{

​            outline: none;									清除点击默认边框为蓝色

​            appearance: none;							清除默认边框样式

​            -webkit-appearance: none;			兼容		谷歌

​            -moz-appearance: none;				兼容  火狐

​            position: relative;				

​            width: 2.6rem;								宽度

​            height: 1.52rem;							高度	

​            border-radius: 50px;			

​            border: 1px solid #ccc;

​            background-color: #ccc;

​        }

2.设置input按钮开关点击前样式(小圆球样式，伪类)

​        input[type=checkbox].switch::after{

​            content: '';

​            display: inline-block;

​            width: 1.4rem;

​            height: 1.4rem;

​            border-radius: 50%;

​            background-color: #fff;

​            box-shadow: 0 0 2px #999;						阴影

​            transition: left 0.1s linear;					设置过度效果

​            position: absolute;							伪类一定要用定位

​            top: 0;

​            left: 0;

​        }

3.设置input按钮开关点击后基本样式发生的变化

​        input[type=checkbox].switch:checked{			checked 表示点击后的样式

​            background-color: #32BA58;				按钮背景颜色变成绿色(自己可以设置)
	
​        }

4.设置input按钮开关点击后样式(伪类)

默认为不被选中的状态

当input[type=checkbox] 被选中的时候，伪元素显示下面效果(位置发生变化)

​        input[type=checkbox].switch:checked::after{			checked：：after  伪类点击后

​            position: absolute;							伪类一定要用定位

​            top: 0;

​            left: 50%;			

​        }

5代码综合

  <input type="checkbox" class="switch">
    <input type="checkbox" class="switch switch-info">
    <input type="checkbox" class="switch switch-danger">
    <input type="checkbox" class="switch switch-warm">
    <input type="checkbox" class="switch switch-primary">

        /* 必须是Input class 添加 switch 才能实现以下效果 */
        input[type=checkbox].switch{
            outline: none;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            position: relative;
            width: 2.6rem;
            height: 1.52rem;
            border-radius: 50px;
            border: 1px solid #ccc;
            background-color: #ccc;
        }
        input[type=checkbox].switch::after{
            content: '';
            display: inline-block;
            width: 1.4rem;
            height: 1.4rem;
            border-radius: 50%;
            background-color: #fff;
            box-shadow: 0 0 2px #999;
            transition: left 0.1s linear;
            position: absolute;
            top: 0;
            left: 0;
        }
        input[type=checkbox].switch:checked{
            background-color: #32BA58;
        }
        /* 
        1.默认为不被选中的状态
        当input[type=checkbox] 被选中的时候，伪元素显示下面效果(位置发生变化)
         */
        input[type=checkbox].switch:checked::after{
            position: absolute;
            top: 0;
            /* left:1.2rem; */
            left: 50%;
        }
        /* 状态 */
        input[type=checkbox].switch-info.switch:checked{
            background-color: #409eff;
        }
        input[type=checkbox].switch-danger.switch:checked{
            background-color: rgb(255, 73, 73);
        }
        input[type=checkbox].switch-warm.switch:checked{
            background-color: hsl(51, 93%, 54%);
        }
        input[type=checkbox].switch-primary.switch:checked{
            background-color: #409eff;
        }
        input[type=checkbox].switch-primary.switch{
            background-color: rgb(255, 73, 73);
        }