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

　　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. $.each()和$(selector).each()

    转载:http://www.jb51.net/article/65215.htm $.each()与$(selector).each()不同, 后者专用于jquery对象的遍历, 前者可用于遍历任何的 ...

  2. 奇妙的数字-2015省赛C语言A组第三题

    奇妙的数字 小明发现了一个奇妙的数字.它的平方和立方正好把0~9的10个数字每个用且只用了一次.你能猜出这个数字是多少吗? 请填写该数字,不要填写任何多余的内容.

  3. oracle 11g 分区表创建（自动按年、月、日分区）

    前言:工作中有一张表一年会增长100多万的数据,量虽然不大,可是表字段多,所以一年下来也会达到 1G,而且只增不改,故考虑使用分区表来提高查询性能,提高维护性. oracle 11g 支持自动分区,不 ...

  4. html 如何访问 jar 包里面的静态资源（js、css、字体等）

    前言:最近两天在尝试写一个工具 jar 包,里面包含后台处理的 java 代码,包含前端 html.js.css.字体文件等,过程中解决了访问 jar 包里的静态资源问题,所以记录下来. 附:自己的一 ...

  5. springboot中mybatis逆向工程与分页的应用

    最近在项目中应用到springboot与mybatis,在进行整合过程中遇到一些坑,在此将其整理出来,便于以后查阅与复习. 项目运行环境为:eclispe+jdk1.8+maven 一.搭建Sprin ...

  6. JSP学习笔记（6）-使用数据库

    1.连接MySQL数据库 1.1.JDBC JDBC(Java Database Connectivity)提供了访问数据库的API,由一些Java类和接口组成,是Java运行平台核心库中的一部分.用 ...

  7. Linux常用基本命令[cp]

    cp:复制文件或者目录 用法格式: cp [option] [source] [dest] cp [选项] [源文件] [目标文件] >用root账户,创建文件,复制文件 root@dev:/h ...

  8. 设计模式原则(7)--Composition&AggregationPrinciple(CARP)--合成&聚合复用原则

    作者QQ:1095737364    QQ群:123300273     欢迎加入! 1.定义:  要尽量使用合成和聚合,尽量不要使用继承. 2.使用场景: 要正确的选择合成/复用和继承,必须透彻地理 ...

  9. python邮件发送

    '''qq邮件与其他邮件有所不同,下以我的qq邮件为例(切勿转载):''' import osimport smtplibfrom email.mime.text import MIMEText # ...

  10. 手把手在MyEclipse中搭建Hibernate开发环境

    (尊重劳动成果,转载请注明出处:http://blog.csdn.net/qq_25827845/article/details/53414303冷血之心的博客) 在MyEclipse中如何搭建Hib ...