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

骑猪看日落 2023-05-30 09:17 13阅读 0赞

# 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;
    
            }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzIzMDU3_size_16_color_FFFFFF_t_70]

## 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;
    
            }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzIzMDU3_size_16_color_FFFFFF_t_70 1]

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

input[type=checkbox].switch:checked{
        			checked 表示点击后的样式
    
                background-color: #32BA58;				按钮背景颜色变成绿色(自己可以设置)
    	
            }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzIzMDU3_size_16_color_FFFFFF_t_70 2]

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

##### 默认为不被选中的状态 #####

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

input[type=checkbox].switch:checked::after{
        			checked：：after  伪类点击后
    
                position: absolute;							伪类一定要用定位
    
                top: 0;
    
                left: 50%;			
    
            }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzIzMDU3_size_16_color_FFFFFF_t_70 3]

# 5代码综合 #

/* 必须是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);
            }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzIzMDU3_size_16_color_FFFFFF_t_70 4]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzIzMDU3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191113224918134.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzIzMDU3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzIzMDU3_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191113224033175.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzIzMDU3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzIzMDU3_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191113224342715.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzIzMDU3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzIzMDU3_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191113224528621.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzIzMDU3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzIzMDU3_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191113231031682.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzIzMDU3,size_16,color_FFFFFF,t_70