通过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. SecureCrt脚本（一）顶级对象之Crt

    Crt自动化 测试 SecureCrt脚本 JS脚本   1.引言 2.关于脚本表头 3.顶级对象'crt'的子属性和方法 3.1.属性 3.1.1.Dialog 3.1.2.Screen 3.1.3 ...

  2. Graph database_neo4j 底层存储结构分析(8)

    3.8  示例1:neo4j_exam 下面看一个简单的例子,然后看一下几个主要的存储文件,有助于理解<3–neo4j存储结构>描述的neo4j 的存储格式. 3.8.1    neo4j ...

  3. HttpClient工具类v1.7

    package com.cucpay.fundswap.util; import java.io.IOException; import java.net.SocketTimeoutException ...

  4. CSS3选择器（一）之基本选择器

    CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运用的灵活到位,我想对很多朋友还是一定的难度,特别是CSS3中的:nth选择器.那么从现在开始我们先丢开他们版本的区别, ...

  5. 用特征来实现混入(mix-in)式的多重继承

    用特征来实现混入(mix-in)式的多重继承 Scala里相当于Java接口的是特征(Trait).Trait的英文意思是特质和性状(本文称其为特征),实际上他比接口还功能强大.与接口不同的是,它还可 ...

  6. 安卓学习笔记---Activity

    由于学期实训的要求,我开始学习安卓了.从本月一号开始,学了五天了.时间短,刚学到的东西容易忘,我记一下笔记. 首先是对Activity的理解.activity首先是一个java类,我们创建一个新的ac ...

  7. 懒加载 字典转模型 自定义cell

    1 懒加载: 1>  什么是懒加载? 懒加载又称为延时加载,即在系统调用的时候加载,如果系统不调用则不会加载.所谓的懒加载其实就是重写其 get 方法. 2>  特点:在使用懒加载的时候要 ...

  8. SQL - 语法收集

    随机数 select cast(floor(rand()*10000) as int) GUID select newid() 判断两个日期是否为同一天 DATEDIFF(DAY,QsDate,'20 ...

  9. Export-XLSX PowerShell generate real Excel XLSX files without Excel and COM

    http://gallery.technet.microsoft.com/scriptcenter/Export-XLSX-PowerShell-f2f0c035

  10. 《GK101任意波发生器》升级固件发布（版本：1.0.2build851）

    一.固件说明: 硬件版本:0,logic.3 固件版本:1.0.2.build851 编译日期:2015-06-26 ====================================== 二. ...