通过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. Google Code Jam 2010 Round 1C Problem B. Load Testing

    https://code.google.com/codejam/contest/619102/dashboard#s=p1&a=1 Problem Now that you have won ...

  2. android怎样调用@hide和internal API

    android怎样调用@hide和internal API 2012-12-11 16:21 8772人阅读 评论(3) 收藏 举报  分类: Android开发(277)  Android有两种类型 ...

  3. 去掉地址栏中的jsessionid

    原来我在index.jsp中的编码是 <c:redirect url="/sys/login.shtm"/> 结果每次第一次登录都会在地址栏上出现了jsessionid ...

  4. 导航栏下a标签失效的原因

    前天我一直没找到失效的结果,就在刚才,我用不同的浏览器打开我编写的网页,有一个浏览器的图片循环播放效果错位了,我觉得就是它上边的div把他挤下来了.正如前天网上看到的高手的们的说法.我用firebug ...

  5. cookiecutter-flask生成的框架里边自带了一个CRUDMixin类

    单元测试的必要性 之前曾经写过一篇讲单元测试的,正好最近也在实践和摸索.我似乎有种洁癖,就是我会严格遵守流程性的东西,比如测试,注释和文档等.目前就职的公司在我接手项目的时候是没有一行单元测试的,我挺 ...

  6. [转]通过继承ConfigurationSection，在web.config中增加自定义配置

    本文转自:http://www.blue1000.com/bkhtml/2008-02/55810.htm 前几天写了一篇使用IConfigurationSectionHandler在web.conf ...

  7. 【iHMI43 4.3寸液晶模块】demo例程（版本1.02）发布

    ============================== 技术论坛:http://www.eeschool.org 博客地址:http://xiaomagee.cnblogs.com 官方网店:h ...

  8. CSS2系列：BFC(块级格式化上下文)IFC(行级格式化上下文)

    BFC 块级格式化上下文,不好理解,我们暂且把她理解成"具有特殊的一类元素" 哪些元素会生成BFC? 根元素 float属性不为none position为absolute或fix ...

  9. Solr学习笔记之1、环境搭建

    Solr学习笔记之1.环境搭建 一.下载相关安装包 1.JDK 2.Tomcat 3.Solr 此文所用软件包版本如下: 操作系统:Win7 64位 JDK:jdk-7u25-windows-i586 ...

  10. jQuery+CSS 简单代码实现遮罩层( 兼容主流浏览器 )

    /* ** jQuery版本:jQuery-1.8.3.min.js ** 浏览器:Chrome( v31.0.1650.63 m ),IE11,Firefox( v32.0.1 ),IETester ...