抄自： 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. Linux Kernel Version Numbering

    Because there are numerous revisions and releases of the Linux kernel and new ones are developed at ...

  2. 判断表字段是否存在default约束

    sql语句 IF NOT EXISTS ( SELECT * FROM dbo.syscolumns WHERE id = OBJECT_ID('[dbo].[TActScoreReceiveRec] ...

  3. python语言switch-case

    初学python语言,竟然很久才发现python没有switch-case语句,查看官方文档说是可以用if-elseif-elseif....代替. 讲真,这都不是问题.不就是一个条件判断吗.用if- ...

  4. [NOIP2011] mayan游戏（搜索+剪枝）

    题目描述 Mayan puzzle是最近流行起来的一个游戏.游戏界面是一个 7 行5 列的棋盘,上面堆放着一些方块,方块不能悬空堆放,即方块必须放在最下面一行,或者放在其他方块之上.游戏通关是指在规定 ...

  5. 练习2：雨淋湿了一道题，9个数字只能看清楚4个，第一个肯定不是1 [X * (Y3 + Z)]^2 = 8MN9，求出各个数字

    题目上的X代表的未知数,不一定是同一个数字. 其实这道题,直接一推敲答案就出来了,首先,积德尾数是9,说明 X*(Y3 + Z)的值尾数是3,3的因子只有1和3,所以X只有1和3候选,但是题目说第一个 ...

  6. Unity3D特效-场景淡入淡出

    最近公司开始搞Unity3D..整个游戏..特效需求还是比较多的.关于UI部分的特效淡入淡出.看网上用的方法都是用个黑东东遮挡然后设置alpha这么搞....本大神感觉非常的low.而且很渣.故奋笔疾 ...

  7. python（pymysql）之mysql简单操作

    一.mysql简单介绍 说到数据库,我们大多想到的是关系型数据库,比如mysql.oracle.sqlserver等等,这些数据库软件在windows上安装都非常的方便,在Linux上如果要安装数据库 ...

  8. 用脚本处理utf8的文本文件

    filename="C:\Users\Administrator\Desktop\soft\x.txt" filename2="C:\Users\Administrato ...

  9. springmvc的xml版本和注解版本

    感觉还是注解方式比较实用 xml方式 web.xml <!-- 读取spring mvc的核心配置文件 --> <servlet> <servlet-name>yx ...

  10. javascript事件类型之界面拖拽交互

    一.在线DEMO 界面拖拽交互