通过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. jQuery 跨域访问问题解决方法（转）

    转自:http://www.jb51.net/article/21213.htm 浏览器端跨域访问一直是个问题, 多数研发人员对待js的态度都是好了伤疤忘了疼,所以病发的时候,时不时地都要疼上一疼.记 ...

  2. 将java的class文件放到一个指定文件夹下

    用javac执行java文件时,要把java文件的class文件放到指定文件夹下,注意文件夹要创建好,执行javac -d 文件夹 ***.java 如图: 在class文件夹下就出现了L的class ...

  3. X-Japan

    听X Japan这么久,几位大叔还是没有认清,真是惭愧. X-Japan是日本著名的视觉系摇滚乐队.原来叫X,在1992年8月HEATH入团的同时改名为X JAPAN. 乐队成立于1982年1月,19 ...

  4. MS14-025引起的问题 - 1

    windows2008有一个叫组策略首选项(Group Policy Preference)的新特性.这个特性可以方便管理员在整个域内部署策略.本文会详细介绍这个组策略首选项的一些缺陷.尤其是当下发的 ...

  5. HDU 1044 Collect More Jewels（BFS+DFS）

    Collect More Jewels Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Othe ...

  6. JQUERY 一些技巧在实际中的应用

    在jquery选择器中.继续做判断$("tr[rel!=" + id + "]").find('.status').html('--'); $("tr ...

  7. DWZ的选择带回功能无法带回第一个value中的值

    <volist name="node1._child" id="node2"> 这里的value中第一个id是无法带回给上一个页面的..如果要带回则 ...

  8. 提高Vector容器的删除效率

    vector容器是类似与一个线性数组,索引效率高,插入,删除的效率很低,需要遍历数据列表,一般情况下vector的删除操作由一下函数完成: iterator erase(iterator positi ...

  9. javascript 拷贝文本

    最近做了几个小网站,想在平时活动的论坛里面宣传一下,操作方式就是在留言时快速添加上自己的小广告.为了方便贴广告,写了一个油猴子脚本. 起先的设计是在页面中添加一个按钮,点击按钮自动将小广告插入到光标的 ...

  10. Oracle 常见问题

    查看Oracle数据库是否安装成功 sqlplus /nolog SQL>conn / as sysdba Connected to an Idle instance(表明成功) SQL> ...