首页 > 代码库 > CSS做一个Switch开关

CSS做一个Switch开关

2024-09-06 08:45:34   215人阅读

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

 

　　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="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>

 

/*开关的大小*/
.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;
}

 

CSS做一个Switch开关


联系
我们