通过css属性实现如图所示按钮

要点：通过checkbox选中与否的状态与兄弟选择器实现相关功能
1.设置开关大小并设置定位方式为relative

.swift-btn {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 25px;
}

2.设置checkbox属性，并设置为不可见状态

.swift-btn input[type='checkbox'] {

position: absolute;

width: 50px;

height: 25px;

opacity: 0;

z-index: 9;

outline: none;

}

3.设置按钮样式，通过伪类元素实现，并添加过渡动画

.swift-btn > label{
    position: absolute;
    display: inline-block;
    width: 50px;
    height: 25px;
    border-radius: 25px;
    border: 1px solid #ddd;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
}
.swift-btn > label:before {
    content: '';
    position: absolute;
    display: inline-block;
    left: 40px;
    width: 25px;
    height: 25px;
    border-radius: 20px;
    line-height: 25px;
    text-indent: -1px;
}
.swift-btn > label:after {
    content: '';
    position: absolute;
    display: inline-block;
width: 24px;
    height: 24px;
    left: 0;
    top: 1px;
    border-radius: 1px;
    box-shadow:2px 0px 1px #ddd;
    border-radius: 15px;
    
    transition: left 0.3s ease;
    -webkit-transition: left 0.3s ease;
    -moz-transition: left 0.3s ease;
}
 
 

4.设置input选中后的样式

.swift-btn input[type='checkbox']:checked + label{

border: 1px solid #000;

background-color: #000;

}

.swift-btn input[type='checkbox']:checked + label::before {

display: inline-block;

color: #fff;

text-indent: -25px;

}

.swift-btn input[type='checkbox']:checked + label::after {

left: 26px;

top: 1px;

width: 24px;

height: 24px;

border: 0;

box-shadow: none;

box-sizing: content-box;

}

完整代码示例

<!DOCTYPE html>

<html>

<meta charset='utf-8'>

<style>

.swift-btn {

position: relative;

display: inline-block;

width: 50px;

height: 25px;

}

.swift-btn input[type='checkbox'] {

position: absolute;

width: 50px;

height: 25px;

opacity: 0;

z-index: 9;

outline: none;

}

.swift-btn > label{

position: absolute;

display: inline-block;

width: 50px;

height: 25px;

border-radius: 25px;

border: 1px solid #ddd;

transition: all 0.3s ease;

-webkit-transition: all 0.3s ease;

-moz-transition: all 0.3s ease;

}

.swift-btn > label:before {

content: '';

position: absolute;

display: inline-block;

left: 40px;

width: 25px;

height: 25px;

border-radius: 20px;

line-height: 25px;

text-indent: -1px;

}

.swift-btn > label:after {

content: '';

position: absolute;

display: inline-block;

width: 24px;

height: 24px;

left: 0;

top: 1px;

border-radius: 1px;

box-shadow:2px 0px 1px #ddd;

border-radius: 15px;

background-color: #fff;

transition: left 0.3s ease;

-webkit-transition:
left 0.3s ease;

-moz-transition: left 0.3s ease;

}

.swift-btn input[type='checkbox']:checked + label{

border: 1px solid #000;

background-color: #000;

}

.swift-btn input[type='checkbox']:checked + label::before {

display: inline-block;

color: #fff;

text-indent: -25px;

}

.swift-btn input[type='checkbox']:checked + label::after {

left: 26px;

top: 1px;

width: 24px;

height: 24px;

border: 0;

box-shadow: none;

box-sizing: content-box;

}

</style>

<body>

<span class="add-item-status swift-btn">

<input type="checkbox" name="" id='checkbox' />

<label class="" for='checkbox'></label>

</span>

</body>

</html>

通过css3实现开关选择按钮的更多相关文章

  1. css3 iphone开关 移动端开关、按钮、input

    css3  iphone开关  移动端开关.按钮.input <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  2. CSS3 - CheakBox 开关效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 67 个JavaScript和CSS实用工具、库与资源

    在这篇文章中,我不会与大家谈论大型的前端框架,如 React.Angular.Vue 等,也没有涉及那些流行的代码编辑器,如 Atom.VS Code.Sublime,我只想与大家分享一个有助于提升开 ...

  4. 炫酷霸气的HTML5/jQuery应用及源码

    也许在5年前,HTML5还是一种很前卫的技术,大家还只是将它当做实验来看待,更别说产品应用了.但是现在HTML5已经非常流行,无论从PC端还是移动端,HTML5都扮演着非常重要的角色.今天我们要分享的 ...

  5. JavaScript和CSS实用工具、库与资源

    JavaScript和CSS实用工具.库与资源 JavaScript 库 Particles.js  - 一个用于在网页上创建漂亮的浮动粒子的 JS 库: Three.js  - 用于在网页上创建 3 ...

  6. 程序猿必备的10款web前端动画插件

    1.基于jQuery的瀑布流图片筛选插件 瀑布流的展现方式在目前的网页中用得越来越广泛,特别是图片和首页文章的动态加载. 今天分享的这款就是基于jQuery的瀑布流图片筛选插件,我们可以点击图片分类名 ...

  7. 使用css3 制作switch开关

    使用css3来实现switch开关的效果: html代码: <!--switch开关--><div class="switch-btn"> <inpu ...

  8. css3实现switch开关效果

    之前阿里电面的时候问的一个问题,今天抽时间做了个demo. html结构 <div class="container"> <div class="bg_ ...

  9. css3 js 做一个旋转音乐播放开关

    我们经常会看到一些旋转音乐播放开关,今天我也写了一个分享出来,大家需要的话可以参考一下: <!DOCTYPE html> <html lang="en"> ...

随机推荐

  1. COJ500 杨老师的路径规划（MST） （我是认真的）

    用LCT来维护生成树,动态加边(s,t,w)时,新建节点x,权值为边权w. 1.若s与t不连通,则连接s-x,x-t,答案+w 2.若s与t连通,找出s-t路径上的最大权w2,若w<w2,删除w ...

  2. SSh结合Easyui实现Datagrid的分页显示

    近日学习Easyui,发现非常好用,界面很美观.将学习的心得在此写下,这篇博客写SSh结合Easyui实现Datagrid的分页显示,其他的例如添加.修改.删除.批量删除等功能将在后面的博客一一写来. ...

  3. 【MVC框架整合】之 SpringMVC3.2.0+MyBatis3.1.1+Spring3.2.0

    1.先整合spring和Mybatis 第一步基本上都是一样加入jar包 创建测试目录 添加junit jar包和log4j配置文件 Log4j的配置文件基本上都是不会变的复制过来就行了 现在就和Hi ...

  4. Solve error LNK2038: mismatch detected for '_ITERATOR_DEBUG_LEVEL': value '0' doesn't match value '2'

    This error happens in Release mode of VS2010, solve this problem by do following: . Go to Project Pa ...

  5. hdu 1735 字数统计

    这道题是到贪心的题目,首先用ans记录下所有的0的个数,然后尽量去掉更多的0,剩下的0的个数就是最少的字数.首先想到最后一行的0的个数可以减掉,然后就是m行开头的两个0可以减掉.然后思考最多还可以减掉 ...

  6. ThinkPHP添加模板时，犯的三个错

    错误一:低级错误,将n打成看m,如图1 图1 这个找错,花了我将近2小时.扫了好几遍与之相关的代码,上网查了好些. 错误二:这个算是个低能的高级错误了.具体模板显示的效果如图2 图2 只要将相对地址及 ...

  7. LINQ Count/Sum/Min/Max/Avg

    参考:http://www.cnblogs.com/peida/archive/2008/08/11/1263384.html Count/Sum/Min/Max/Avg用于统计数据,比如统计一些数据 ...

  8. JavaScript - 获取高度

    网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offset ...

  9. ZOJ 2975 思维

    题意 给出一个矩形 问在其中存在多少子矩形 其四个角上的字母是一样的 一开始暴力写了一发 先枚举行数 再枚举两个列数 再向下枚举行数 判断能否 没有意外的超时了 后来想了想 当我们已经确定两个列数的时 ...

  10. Nginx 报错： nginx: [error] open() "/usr/local/nginx/logs/nginx.pid" failed (2: No such file or directory) 的解决方法

    今天测试域名访问不了,登陆 Linux(Ubuntu)重启Nginx: nginx -s reload 结果报错: nginx: [error] open() : No such file or di ...