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

　　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. hive 中的正则表达式

    背景: 前几天拿来apache日志,用hive的正则进行匹配,发现匹配出来的字段算是NULL,但是我用RegexBuddy工具显示能够匹配的到啊!例子如下(我拿正常的apache日志来比较,我的apa ...

  2. HDU1007(最近点对)

    Quoit Design Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  3. Java 并发：Future FutureTask

    Future 当向一个ExecutorService提交任务后可以获得一个Future对象,在该对象上可以调用get,cancel等命令来获取任务运行值或者是取消任务.下面是一个简单的计数任务: pu ...

  4. 你不知道的JavasScript上篇·第四章·混合对象·类

    一.类的理论 1.类的核心概念:多态 是说父类的通用行为可以被子类用更特殊的行为重写 二.类的机制 1.构造函数 类实例是有一个特殊的类方法构造的,这个方法名通常和类名一致: 类构造函数属于类,构造函 ...

  5. 排序算法(8)--Merge Sorting--归并排序--Merge sort--归并排序

    1.基本思想  归并排序是建立在归并操作上的一种有效的排序算法,该算法是采用分治法(Divide and Conquer)的一个非常典型的应用.将已有序的子序列合并,得到完全有序的序列:即先使每个子序 ...

  6. promise 拙见

    一,promise是什么? promise 是最早由社区提出和实现是一种解决异步编程的方案,比其他传统的解决方案(回调函数和事件)更合理和强大. ES6 将其写进了语言标准,统一了用法,原生提供了 p ...

  7. 001Git & GitHub

    01.创建GitHub账号 请点击标题链接,阅读官网帮助 02.创建代码仓库 请点击标题链接,阅读官网帮助 03.安装Git 注:Git官网下载太慢,可在[360卫士]-->[软件管家]中搜索下 ...

  8. Intellij IDEA添加项目依赖

    在idea的设置中,存在下面几个标签页 Libraies是向idea中添加的jar或者文件夹进入. module是添加具体的项目依赖,后面的选项为部署时是否忽略. artifacts配置打包方式,需要 ...

  9. 控制器隐藏了导航 下页pop 导航位置看到黑条

    控制器隐藏了导航 下页pop 导航位置看到黑条 解决: -(void)viewWillDisappear:(BOOL)animated{        [super viewWillDisappear ...

  10. JavaScript判断变量名是否存在数组中

    直接上代码: JavaScript代码: var array=[{name:"张珊",sex:"男"}]; console.log(array); if(arr ...