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

　　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. 乐字节-Java8新特性-接口默认方法之Stream流（下）

    接上一篇:<Java8新特性之stream>,下面继续接着讲Stream 5.流的中间操作 常见的流的中间操作,归为以下三大类:筛选和切片流操作.元素映射操作.元素排序操作: 操作 描述 ...

  2. bind(port)与.localAddress(new InetSocketAddress(port))区别

    两者并没有什么区别,最后都会调用AbstractBootstrap这个抽象类的bind()方法.

  3. Flask 中路由系统

    1. @app.route() 装饰器中的参数 methods : 当前 url 地址,允许访问的请求方式 @app.route("/info", methods=["G ...

  4. 天天生鲜 - App设计

    天天生鲜-思路数据库设计 天天生鲜-各个App 全文检索 天天生鲜-静态文件 一.项目目录 daily_fresh_demo - daily_fresh_demo - df_cart # 购物车功能 ...

  5. 【代码笔记】iOS-二维码

    一,工程图. 二,代码. ViewController.m #import "ViewController.h" #import "ScanViewController. ...

  6. git使用相关记录

    上传github操作记录:https://blog.csdn.net/pql925/article/details/72772660 git提交仓库相关:https://blog.csdn.net/M ...

  7. js 匿名函数立即执行问题

    js立即执行函数写法理解 这篇真的写得很清楚了,不光括号可以将函数声明转换成函数表达式然后立即执行,!,+,-,=也都可以转换,但是可能会带来意外的结果,因此一般都用括号实现. 还有关于for (va ...

  8. JavaScript数组转字符串，字符串转数组

    //--------------------数组转字符串--------------------------- //需要将数组元素用某个字符连接成字符串 var a1, b1,c1; a1 = [&q ...

  9. Android：Error:Execution failed for task ':app:clean'. > Unable to delete directory

    as  clean项目之后有时候会报错. 可以找得到目录删掉,然后重启as,但是下次clean可能又会报类似的错误. 解决方法如下: 进入File-Setting-Build,Execution,De ...

  10. RecyclerView源码解析 - 分割线

    猜想:   既然考虑了分割线,那么子View在测量时候肯定要去考虑分割线留出的位置    直接measureChild()方法 猜想: 分割线会调用绘制的方法 onDraw()