纯css的滑块开关按钮
之前在项目中使用滑块开关按钮，纯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的滑块开关按钮的更多相关文章
- 纯CSS实现扁平化风格开关按钮
开关样式预览图 前言 最近在基于bootstrap框架开发一个网站,在填写表单一项需要用户填写是否选择某一选项,本来想引用bootstrap框架自带的一个按钮插件,结果在引用js的时候总是出错,就找了 ...
- 超强的纯 CSS 鼠标点击拖拽效果
背景 鼠标拖拽元素移动,算是一个稍微有点点复杂的交互. 而在本文,我们就将打破常规,向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果. 在之前的这篇文章中 -- 不可思议的纯 CS ...
- 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 一个标签的72变，打造一个纯CSS图标库
每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...
- 利用animation和text-shadow纯CSS实现loading点点点的效果
经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完 ...
- 使用纯CSS实现带箭头的提示框
爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...
- 用纯css改变下拉列表select框的默认样式（不兼容IE10以下）
在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计 ...
- CSS 魔法系列：纯 CSS 绘制三角形（各种角度）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- 纯CSS实现二级下拉导航菜单
这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: < ...
随机推荐
- 【ML入门】李宏毅机器学习笔记01-Learning Map
版权声明:小博主水平有限,希望大家多多指导.本文仅代表作者本人观点,转载请联系知乎原作者——BG大龍. 目录 1 什么是机器学习? 2 机器学习的3个步骤 3 李宏毅老师的机器学习课程 4 按“模型的 ...
- ASP.NET Core 中的管道机制
首先,很感谢在上篇文章 C# 管道式编程 中给我有小额捐助和点赞的朋友们,感谢你们的支持与肯定.希望我的每一次分享都能让彼此获得一些收获,当然如果我有些地方叙述的不正确或不当,还请不客气的指出.好了, ...
- Hadoop自学系列集(四) ---- Hadoop集群
久等了,近期公司比较忙,学习的时间都没有啊,到今日才有时间呢!!!好了,下面就跟着笔者开始配置Hadoop集群吧. hosts文件和SSH免密码登录配置好了之后,现在进入Hadoop安装目录,修改一些 ...
- java多线程核心api以及相关概念(一)
这篇博客总结了对线程核心api以及相关概念的学习,黑体字可以理解为重点,其他的都是我对它的理解 个人认为这些是学习java多线程的基础,不理解熟悉这些,后面的也不可能学好滴 目录 1.什么是线程以及优 ...
- 阿里技术面全A，终面却被产品经理拉下马。。。
大纲: 一.投递简历 二.准备面试 三.技术一面 四.健身房里的技术二面 五.产品经理的死亡三面 六.总结 一.投递简历 找内推.大公司投简历尽量找内推,无论是校招还是社招.校招可以去牛客网或知乎找, ...
- 免安装版tomcat安装成服务
安装方式(前提已经安装好了jdk,并配置了环境量): (1) 下载非exe的tomcat zip包: (2) 解压缩,如:D:\tomcat: (3) 进入D:\tomcat\bin,修改servic ...
- Chrome谷歌浏览器实用插件
总结整理了一下个人平时常用的谷歌浏览器插件 Adblock Plus 广告拦截 uBlock Origin Chrono 下载管理器 Tampermonkey 油猴子(各种强大的脚本,强烈推荐) F ...
- 10分钟了解一致性hash算法
应用场景 当我们的数据表超过500万条或更多时,我们就会考虑到采用分库分表:当我们的系统使用了一台缓存服务器还是不能满足的时候,我们会使用多台缓存服务器,那我们如何去访问背后的库表或缓存服务器呢,我们 ...
- 微信公众平台注册及AppID和AppSecret的获取
一.注册公众平台 1.入口 浏览器搜索“微信公众平台”,进入官网,点右上角立即注册. 2.选择账号类型 注册前需要选择一个账号类型,共有4个账号类型可以选择,每种类型能提供不同的功能,功能区别见下图. ...
- WIZnet-io6Library下载及使用
概观 io6Library是一个IPv6集成库,可以轻松集成和管理使用WIZnet硬连线双TCP / IP堆栈控制器(WIZCHIP)产品系列的用户应用程序. io6Library用于管理依赖于用户特 ...