之前在项目中使用滑块开关按钮，纯css写的，不考虑兼容低版本浏览器，先说下原理：

使用 checkbox 的 选中 checked 属性改变css 伪类样式， 一定要使用-webkit-appearance: none; 先清除checkbox的默认样式 ，否则写其他的样式不起作用；

好，不多说，直接上代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css滑块开关</title>

    <style>

        .checke{

            position: relative;

            -webkit-appearance: none;

            width:90px;

            height: 44px;

            line-height: 44px;

            background: #eee;

            border-radius: 30px;

            outline: none;

        }

        .checke:before{

            position: absolute;

            left: 0;

            content: '';

            width: 44px;

            height: 44px;

            border-radius: 50%;

            background: #eee;

            box-shadow: 0px 0px 5px #ddd;

            transition: all 0.2s linear;

        }

        .checke:checked{

           background: #18ff0a;

        }

        .checke:checked:before{

            left: 45px;

            transition: all 0.2s linear;

        }

    </style>

</head>

<body>

<input type="checkbox" class="checke">

</body>

</html>　　

一个干净整洁的按钮代码就产生了！如果需要根据按钮样式，决定某个数据值，就要写在js中判断 checkbox 是否选择就ok了，简单易用！

纯css的滑块开关按钮的更多相关文章

  1. 纯CSS实现扁平化风格开关按钮

    开关样式预览图 前言 最近在基于bootstrap框架开发一个网站,在填写表单一项需要用户填写是否选择某一选项,本来想引用bootstrap框架自带的一个按钮插件,结果在引用js的时候总是出错,就找了 ...

  2. 超强的纯 CSS 鼠标点击拖拽效果

    背景 鼠标拖拽元素移动,算是一个稍微有点点复杂的交互. 而在本文,我们就将打破常规,向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果. 在之前的这篇文章中 -- 不可思议的纯 CS ...

  3. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  4. 一个标签的72变，打造一个纯CSS图标库

    每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...

  5. 利用animation和text-shadow纯CSS实现loading点点点的效果

    经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完 ...

  6. 使用纯CSS实现带箭头的提示框

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...

  7. 用纯css改变下拉列表select框的默认样式（不兼容IE10以下）

    在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式.     事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计 ...

  8. CSS 魔法系列：纯 CSS 绘制三角形（各种角度）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  9. 纯CSS实现二级下拉导航菜单

    这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: < ...

随机推荐

  1. C#3.0新增功能10 表达式树 05 解释表达式

    连载目录    [已更新最新开发文章,点击查看详细] 表达式树中的每个节点将是派生自 Expression 的类的对象. 该设计使得访问表达式树中的所有节点成为相对直接的递归操作. 常规策略是从根节点 ...

  2. 为什么一直玩A股的股民转战去玩港美股了？港美股系统搭建！

    今天先聊一下,为什么买港美股?不买 A 股? 1.A 股散户太多,港股美股机构居多. A 股市场,散户占据了70%以上交易份额,散户太多有什么坏处?少量的机构和大户很容易坐庄操控股价.A 股几乎所有票 ...

  3. HTML介绍和标签

    1.HTML介绍 1.概述 html不是一种编程语言,是一种描述性的标记语言,用于描述超文本内容的显示方式.比如字体,颜色,大小等. 超文本:音频,视频,图片称为超文本. 标记:<英文单词或者字 ...

  4. 自动生成Mybatis的Mapper文件

    自动生成Mybatis的Mapper文件 工作中使用mybatis时我们需要根据数据表字段创建pojo类.mapper文件以及dao类,并且需要配置它们之间的依赖关系,这样的工作很琐碎和重复,myba ...

  5. thinkphp 多对多表查询

    1.表 班级表classes 学生表student 中间表classes_students 2.使用模型关联查询 新建模型 Classes在里面添加代码 ClassesStudent中间表模型,可以不 ...

  6. Unity3D热更新之LuaFramework篇[09]--资源热更新与代码热更新的具体实现

    前言 在上一篇文章 Unity3D热更新之LuaFramework篇[08]--热更新原理及热更服务器搭建 中,我介绍了热更新的基本原理,并且着手搭建一台服务器. 本篇就做一个实战练习,真正的来实现热 ...

  7. 思路重要or技术重要？

    1,思路串通代码的重要性 前段时间,同事在工作上出现一点难题,在技术大佬中看起来算是微不足道的一点小事,由于没有思路,代码也无从下手,他在百度上条框上搜索自己想要的答案,却始终没有比较理想的,大部分的 ...

  8. gulp压缩js文件报错日志

    输出 gulp-uglify 压缩js文件时报错信息 gulp.task('es6', function () { return gulp.src('src/main/webapp/bower_com ...

  9. 基于 HTML5 WebGL 的加油站 3D 可视化监控

    前言 随着数字化,工业互联网,物联网的发展,我国加油站正向有人值守,无人操作,远程控制的方向发展,传统的人工巡查方式逐渐转变为以自动化控制为主的在线监控方式,即采用数据采集与监控系统 SCADA.SC ...

  10. 算法与数据结构基础 - 滑动窗口(Sliding Window)

    滑动窗口基础 滑动窗口常用来解决求字符串子串问题,借助map和计数器,其能在O(n)时间复杂度求子串问题.滑动窗口和双指针(Two pointers)有些类似,可以理解为往同一个方向走的双指针.常用滑 ...