CSS做一个Switch开关

全屏阅读
  • 基本信息
  • 作者：
  • 作者已发布：925篇文章
  • 发布时间：2020年05月12日 21:10:23
  • 所属分类：CSS, html
  • 阅读次数：2904次阅读
  • 标签：

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

复制代码

顶一下
(0)
100%
订阅 回复
踩一下
(0)
100%
» 郑重声明：本文由mpxq168发布，所有内容仅代表个人观点。版权归恒富网和mpxq168共有，欢迎转载， 但未经作者同意必须保留此段声明，并给出文章连接，否则保留追究法律责任的权利! 如果本文侵犯了您的权益，请留言。

目前有 0 条留言 其中：访客:0 条, 博主:0 条

给我留言

您必须 [ 登录 ] 才能发表留言！