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

　　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. Digital Square（hdu4394）搜索

    Digital Square Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...

  2. Docker入门及基本指令

    Docker概念 Docker就相当于一个Github账号,不过最开始的工程不能自己建立,要从DockerHub这个中央仓库pull过来,这个工程Docker称之为image,这个image竟然是个l ...

  3. Java - Stack源码解析

    Java提高篇(三一)-----Stack 在Java中Stack类表示后进先出(LIFO)的对象堆栈.栈是一种非常常见的数据结构,它采用典型的先进后出的操作方式完成的.每一个栈都包含一个栈顶,每次出 ...

  4. 数据定义语句（DDL语句）

    建立表 create table 表名( 字段名1 类型, 字段名2 类型, ........ 字段名n 类型): 类型有: char(n)       是一个类型,叫定长字符串,数据不够就补空格 v ...

  5. POJ3693(SummerTrainingDay10-J 后缀数组)

    Maximum repetition substring Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10241   Ac ...

  6. iframe 页面刷新

    1.点击刷新 [1].html页面代码 <a href="javascript:;" title="刷新当前页" id="Refresh&quo ...

  7. php中0与’0’的区别

    首先php中0与'0',转化后值相等,但是类型不同: php是一种弱类型的语句,他的变量.字符定义其实并不十分规范,比如 $a = '4′;我们可以说这个$a是一个字符,但是他又可以直接进行数字的加减 ...

  8. js-ES6学习笔记-module（3）

    1.如果想设置跨模块的常量(即跨多个文件),或者说一个值要被多个模块共享,可以采用下面的写法. // constants.js 模块 export const A = 1; export const ...

  9. Hystrix 框架

    雪崩效应的产生原因:当一个服务突然受到高并发的请求,tomcat服务器承受不了的情况下会产生服务堆积,可能导致其他的服务也不可用. 服务保护:当服务产生堆积的时候,对服务实现保护功能. 服务隔离:每个 ...

  10. ListView 添加 HeaderView常见错误

    1.addHeaderView异常: 最近在做通讯录开发时使用ListView,发现一个奇怪的问题:当添加一个ImageView 作为HeaderView时,发现ImageView长宽始终是1:1的大 ...