CSS做一个Switch开关

Posted 一只前端路上的小白

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS做一个Switch开关相关的知识,希望对你有一定的参考价值。

本文为博主原创,转载请注明出处。  

 

  Switch开关:

  

  

 

  根据需求可知,Switch开关只有两种选择,true或false。所以我们想到html的checkbox控件,用它来做。  

<input id="switch" type="checkbox" class="switch" />

  但是在浏览器中,checkbox是有固定形状的(对勾),所以我们并不能直接修改checkbox的样式。

  那我们该修改一个什么东西的样式变成开关呢?所以我们联想到 label 标签,为什么呢?因为label标签的for属性可以绑定表单控件,点击label标签,就相当于你点击了绑定的那个控件。

<label for="switch">test</label>

  

 

  废话不多说,直接上完整代码:  

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="css/test.css" />
    </head>
    <body>
        <div class="switch-container">
            <input id="switch" type="checkbox" class="switch" />
            <label for="switch" onclick="test()"></label>
        </div>
        
        <script>
            var test = function(){
               console.log(!document.getElementById(\'switch\').checked ? "选中" : "未选中");
            }
        </script>
    </body>
</html>

 

/*开关的大小*/
.switch-container {
    height: 15px;
    width: 30px;
}

/*设置checkbox不显示*/
.switch {
    display: none;
}

/*设置label标签为椭圆状*/
label {
    display: block;
    background-color: #EEEEEE;
    height: 100%;
    width: 100%;
    cursor: pointer;
    border-radius: 25px;
}

/*在label标签内容之前添加如下样式,形成一个未选中状态*/
label:before {
    content: \'\';
    display: block;
    border-radius: 25px;
    height: 100%;
    width: 15px;
    background-color: white;
    opacity: 1;
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.08);
    -webkit-transition: all 0.2s ease;
}

/*在label标签内容之后添加如下样式,形成一个选中状态*/
label:after {
    position: relative;
    top: -15px;
    left: 15px;
    content: \'\';
    display: block;
    border-radius: 25px;
    height: 100%;
    width: 15px;
    background-color: white;
    opacity: 0;
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.08);
    -webkit-transition: all 0.2s ease;
}


/* ~ 兄弟选择符。
   p~ul :位于 p 元素之后的所有 ul 元素
*/

/*选中后,选中样式显示*/
#switch:checked~label:after {
    opacity: 1;
}

/*选中后,未选中样式消失*/
#switch:checked~label:before {
    opacity: 0;
}

/*选中后label的背景色改变*/
#switch:checked~label {
    background-color: green;
}

 

 

  如果你用了sass,可以设置变量,来改变你的开关的大小。

$switchHeight: 30px;
$switchWidth: 60px;  /*改变大小只需要改变这个两个的值,后面会用到这两个值*/
.switch-container {
    height: $switchHeight;
    width: $switchWidth;
    margin-bottom: 5px;
    
    .switch {
        display: none;
    }
    
    label {
        display: block;
        background-color: #EEEEEE;
        height: 100%;
        width: 100%;
        cursor: pointer;
        border-radius: 25px;
    }
    
    label:before {
        content: \'\';
        display: block;
        border-radius: 25px;
        height: 100%;
        width: $switchHeight;
        background-color: white;
        opacity: 1;
        box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.08);
        -ms-transition: all 0.2s ease; /* IE 9 */
        -moz-transition: all 0.2s ease; /* Firefox */
        -webkit-transition: all 0.2s ease;/* Safari and Chrome */
        -o-transition: all 0.2s ease; /* Opera */
    }
    
    label:after {
        position: relative;
        top: -$switchHeight;
        left: $switchHeight;
        content: \'\';
        display: block;
        border-radius: 25px;
        height: 100%;
        width: $switchHeight;
        background-color: white;
        opacity: 0;
        box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.08);
        -ms-transition: all 0.2s ease; /* IE 9 */
        -moz-transition: all 0.2s ease; /* Firefox */
        -webkit-transition: all 0.2s ease;/* Safari and Chrome */
        -o-transition: all 0.2s ease; /* Opera */
    }
    
    #switch:checked~label:after {
        opacity: 1;
    }
    
    #switch:checked~label:before {
        opacity: 0;
    }
    
    #switch:checked~label {
        background-color: green;
    }
}

 

以上是关于CSS做一个Switch开关的主要内容,如果未能解决你的问题,请参考以下文章

Bootstarp-switch(动画开关插件)

引导开关检查事件?

CSS+JS复选框开关

Jquery if复选框是否已选中Bootstrap开关

layui开关switch显示不全问题

label+input实现开关切换效果