抄自： 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. RBL开发笔记二

     17:13:55 2014-08-25 有以下几个点:  第一 :怎么在预处理阶段能够做到识别某个宏是否给定义了  这里就定义了一个SystemConfig.h 专门做这个事情  当然是需要make ...

  2. Js控制滚动条

    1>全局控制 //向上滑动显示 var initTop = 0; var i = 1; $(window).scroll(function(){ var scrollTop = $(docume ...

  3. 如何成为一名优秀的前端工程师 (share)

    发现一篇不错的博文,和大家分享一下,为有志成为一名优秀前端工程师的童鞋们提供一个参考. :)~ 本文来源:http://www.biaodianfu.com/what-makes-a-good-fro ...

  4. Bowtie2

    如何使用Bowtie2 相似功能的有: 创建索引 创建索引bowtie2-build使用的命令. -f指定要索引文件后,再给予索引的名称.名称可以连接到任何. bowtie2 build-f refe ...

  5. Artificial-Intelligence BOOKs

    All of Statistics: A Concise Course in Statistical Inference The Elements of Statistical Learning:Da ...

  6. MySql数据库索引原理

    写在前面:索引对查询的速度有着至关重要的影响,理解索引也是进行数据库性能调优的起点.考虑如下情况,假设数据库中一个表有10^6条记录,DBMS的页面大小为4K,并存储100条记录.如果没有索引,查询将 ...

  7. ora-01445：无法从不带保留关键字的表的连接视图中选择ROWID或采样

    系统要创建一个物化试图,用到很多张表,执行的时候报错:   ora-01445:无法从不带保留关键字的表的连接视图中选择ROWID或采样   网上搜了下,有多种原因和解决方法,最终我选择先尝试一下修改 ...

  8. TTS多音字问题

    今天在CSDN上找到了解决方案,终于解决了多音字问题.   Text1.Text = "<pron sym='jia 3'> 贾</pron>宝玉,商<pron ...

  9. Android画图Path的使用

    /**       * Paint类介绍       *        * Paint即画笔,在绘图过程中起到了极其重要的作用,画笔主要保存了颜色,       * 样式等绘制信息,指定了如何绘制文本 ...

  10. Maven学习 (一) 搭建Maven环境

      有两种方式可以配置maven的环境配置,本人推荐使用第二种,即使用本地的maven安装文件,个人感觉这样可以方便管理下载jar包的存放位置,错误信息的输出等,可以在dos窗口中可以清晰看到,虽然比 ...