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

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

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

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

}

/*选中后，未选中样式消失*/

#switch:checked~label:before {

    opacity:;

}

/*选中后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:;

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

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

    }

    #switch:checked~label:before {

        opacity:;

    }

    #switch:checked~label {

        background-color: green;

    }

}

CSS做一个Switch开关的更多相关文章

  1. 【CSS】如何用css做一个爱心

    摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...

  2. 如何用css做一个爱心

    摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...

  3. 简单说 用CSS做一个魔方旋转的效果

    说明 魔方大家应该是不会陌生的,这次我们来一起用CSS实现一个魔方旋转的特效,先来看看效果图! 解释 我们要做这样的效果,重点在于怎么把6张图片,摆放成魔方的样子,而把它们摆放成魔方的样子,重点在于用 ...

  4. js/html/css做一个简单的图片自动（auto）轮播效果//带注释

    FF(firefox)/chrom/ie稳定暂无bug...注意:请自己建立一个images文件,放入几张900*238的图片(注意图片格式和名字与程序中一致). 1. [图片] 1.JPG 2. [ ...

  5. 前端每日实战：145# 视频演示如何用纯 CSS 创作一个电源开关控件

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/PdMyJd 可交互视频 此视频是可 ...

  6. 如何用css做一个细虚线边框表格

    <style type="text/css"> <!-- .dashed_tbl { border-top: 1px dashed #333333; border ...

  7. css代码实现switch开关滑动

    效果预览: 代码如下: <style> #toggle-button{ display: none; } .button-label{ position: relative; displa ...

  8. 项目实践2:(问卷)用html和css做一个网页

    好家伙,又来写项目了 1.以下是考题,姑且把他理解为甲方吧. 2.以下是附带的题目素材 开干.

  9. 自定义常用input表单元素三：纯css实现自定义Switch开关按钮

    自定义常用input表单元素的第三篇,自定义一个Switch开关,表面上看是和input没关系,其实这里采用的是checkbox的checked值的切换.同样,采用css伪类和"+" ...

随机推荐

  1. Android-Menu菜单使用一

    创建菜单 在AndroidSDK中,无需从头创建菜单对象.因为一个活动只与一个菜单关联,所以Android会为该活动创建此菜单,然后将它传给Activity类的onCreateOptionsMenu回 ...

  2. Tomcat Connector原理

    Tomcat工作原理 要了解其中的工作原理我们首先看如下两个图 Tomcat基本架构图: Tomcat请求示意图: 客户端的请求通过Connector接受处理后在到容器Engine->Host- ...

  3. Chinese remainder theorem again（中国剩余定理）

    C - Chinese remainder theorem again Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:% ...

  4. JAVA generic array 泛型数组

    在JAVA中是不支持泛型数组的,不能通过 Z[] array=new Z[10] 这样的方式来创建数组,而是使用反射Aarry.newInstance来创建: 具体代码如下: public Z[][] ...

  5. 只有mdf文件的恢复方法

    EXEC sp_attach_single_file_db @dbname = 'AdventureWorksDW2012_Data',@physname = 'D:\Program Files (x ...

  6. PHP学习目标

    课程阶段学习目标 阶段一: 目标:能够使用DIV+CSS布局出任意的网页页面 说明:根据PSD图设计,使用DIV+CSS布局符合WEB标准.多浏览器兼容的网页,能建立网站制作所需要的模板 阶段二: 目 ...

  7. Mac走moneky

    1. 安装卸载apk ① 安装apk:下载apk到电脑 ,adb install -r 拖动apk adb install /Users/yangdan/Downloads/tutor-6.18.0. ...

  8. 机器学习实战（Machine Learning in Action）学习笔记————08.使用FPgrowth算法来高效发现频繁项集

    机器学习实战(Machine Learning in Action)学习笔记————08.使用FPgrowth算法来高效发现频繁项集 关键字:FPgrowth.频繁项集.条件FP树.非监督学习作者:米 ...

  9. CSS 实例之翻转图片

    具体效果图如下: 主要用到的技术除了3D翻转和定位 ,还用到了一个新的属性 backface-visibility:visable|hidden; 该属性主要是用来设定元素背面是否可见. 具体的步骤如 ...

  10. Linux服务器redhat配置本地yum源

    前面给大家介绍了很多在Linux安装软件的知识,这些软件往往依赖了很多第三方的工具或者软件,如果在Linux服务器有外网的情况,咱们可以通过yum install这样的命令直接去安装这些相关的工具或者 ...