抄自： http://www.cnblogs.com/xyzhanjiang/p/3989836.html?utm_source=tuicool&utm_medium=referral

 <!DOCTYPE html>

 <html>

 <head>

     <title></title>

 </head>

 <style>

     .m-green-checkbox:checked + .m-green-label,

     .m-green-checkbox:not(:checked) + .m-green-label {

       background-color: #e0e0e0;

       border-radius: 24px;

       cursor: pointer;

       display: inline-block;

       height: 24px;

       position: relative;

       text-indent: -9999px;

       width: 48px;

       -webkit-transition: background-color 0.3s;

       transition: background-color 0.3s;

     }

     .m-green-checkbox:checked + .m-green-label:after,

     .m-green-checkbox:not(:checked) + .m-green-label:after {

       background-color: #fff;

       border-radius: 20px;

       content: " ";

       height: 20px;

       left: 2px;

       position: absolute;

       top: 2px;

       width: 20px;

        -webkit-transition: left 0.3s;

       transition: left 0.3s;

     }

     .m-green-checkbox:checked + .m-green-label {

       background-color: #58AF96;

     }

     .m-green-checkbox:checked + .m-green-label:after {

       left: 26px;

     }

 </style>

 <body>

       <input id="example" class="m-green-checkbox"  type="checkbox" style="display: none">

       <label class="m-green-label"  for="example">Check</label>

 </body>

 </html>

checkbox绿色圆圈样式的更多相关文章

  1. input美化 checkbox和radio样式

    input美化    checkbox和radio样式 看惯了input[checkbox]和input[radio]默认样式,有没有想要改变一下呢?比如下面的样式: 比起html默认的样式,上图这些 ...

  2. div仿checkbox表单样式美化及功能

    div仿checkbox表单样式美化及功能(checkbox的样式不好看)素材在底部: 效果图: window.css .bj { position: absolute; top: 0; left: ...

  3. 自定义checkbox， radio样式

    17.2.25.nimil 今天开始做百度前端学院的任务,第一个是自定义checkbox, radio样式. checkbox和radio两个标签是不可以改变样式的,background-color. ...

  4. Css实现checkbox及radio样式自定义

    前言 checkbox和radio样式自定义在网页中是很常见的, 比如在进行表单输入时性别的选择,用户注册时选择已阅读用户协议.随着用户对产品体验要求越来越高,我们都会对checkbox和radio重 ...

  5. 修改 input[type="radio"] 和 input[type="checkbox"] 的默认样式

    表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...

  6. 表单：checkbox、radio样式（用图片换掉默认样式）

    checkbox.radio样式(用图片换掉默认样式) <!doctype html> <html> <head> <meta charset="u ...

  7. 微信小程序修改radio和checkbox的默认样式和图标

    wxml: <view class="body"> <view class="body-content"> 第1题:企业的价值观是 ? ...

  8. 自定义checkbox， radio样式总结

    任务目的 深入了解html label标签 了解CSS边框.背景.伪元素.伪类(注意和伪元素区分)等属性的设置 了解CSS中常见的雪碧图,并能自己制作使用雪碧图 任务描述 参考 样例(点击查看),实现 ...

  9. WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式

    一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: Che ...

随机推荐

  1. C++中的复制构造函数

    与C++中的构造函数相同,复制构造函数在对象生成过程中同样进行插入对应的Vtable虚表,但在成员变量赋值时,除具有复制构造函数的成员对象外,编译器合成复制构造函数其余均采用”Bitwise copy ...

  2. 关于char类型的连续输入

    这个忘了好久了 先回想吧 一 单字符 ①  char m; scanf("%d",&m); ② char m; m=getchar(); putchar(m); 二 字符数 ...

  3. VC++ ADO相关

    <VC对ADO的操作> ADO概述: ADO是Microsoft为最新和最强大的数据访问范例 OLE DB 而设计的,是一个便于使用的应用程序层接口. ADO 使您能够编写应用程序以通过 ...

  4. lua遍历文件夹, zerobrane下载

    参考的这个http://www.cnblogs.com/jiufangding/p/3931585.html,配合批处理. zerobrane下载(上一篇博客忘掉了): http://files.cn ...

  5. WCF：没有终结点在侦听可以接受消息的*这通常是由于不正确的地址或者 SOAP操作导致的。

    没有终结点在侦听可以接受消息的 http://xx.com/WebService.svc. 这通常是由于不正确的地址或者 SOAP 操作导致的.如果存在此情况,请参见 InnerException 以 ...

  6. 实用SQL

    下列语句部分是MsSql语句,不可以在access中使用.SQL分类: DDL—数据定义语言(CREATE,ALTER,DROP,DECLARE) DML—数据操纵语言(SELECT,DELETE,U ...

  7. [HTML5]a标签禁止嵌套使用

    a标签内部不可再写a标签,否则会与父a标签解析到同一级.

  8. JAVA虚拟机垃圾回收算法原理

    除了释放不再被引用的对象外,垃圾收集器还要处理堆碎块.新的对象分配了空间,不再被引用的对象被释放,所以堆内存的空闲位置介于活动的对象之间.请求分配新对象时可能不得不增大堆空间的大小,虽然可以使用的总空 ...

  9. tensorflow 学习1 环境搭建

    1. 下载Anaconda(首选官网,但很慢) Anaconda2-4.0.0-Linux-x86_64.sh Anaconda 安装包还可以到 https://mirrors.tuna.tsingh ...

  10. Socket的三个功能类TCPClient、TCPListener 和 UDPClient （转）

    应用程序可以通过 TCPClient.TCPListener 和 UDPClient 类使用传输控制协议 (TCP) 和用户数据文报协议 (UDP) 服务.这些协议类建立在 System.Net.So ...