抄自： 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. Eclipse Java 调试基本技巧

    前言 这一部分是Eclipse中最为重要的部分.调试的重要性想必大家都清楚. 调试无疑是做项目最苦比的事情,但优秀的编码习惯,良好的调试方式能让这没那么苦,甚至还有点乐趣:). 本文讲解使用Eclip ...

  2. 重放攻击（Replay Attacks）

    重放攻击(Replay Attacks)1.什么是重放攻击顾名思义,重复的会话请求就是重放攻击.可能是因为用户重复发起请求,也可能是因为请求被攻击者获取,然后重新发给服务器. 2.重放攻击的危害请求被 ...

  3. 抓包软件PowerSniff开发计划

    目前抓包的工具不顺手: (1)smartsniff, minisniffer不支持插件 (2)wireshark,omnipeek插件过于复杂,还有不是要装驱动就是admin权限 打算重写一个,第一个 ...

  4. js监听rem实现响应式

    原文链接:http://caibaojian.com/web-app-rem.html (function (doc, win) { var docEl = doc.documentElement, ...

  5. android学习笔记56——Service

    Service四大组件之一,需要在AndroidMainfest.xml中添加相关配置,运行于后台,不与用户进行交换,没有UI... 配置时可通过<intent-filter.../>元素 ...

  6. python学习-day20、装饰器【图片缺失可看】印象笔记博客备份

    前言: 装饰器用于装饰某些函数或者方法,或者类.可以在函数执行之前或者执行之后,执行一些自定义的操作. 1.定义:装饰器就是一个函数,为新定义的函数.把原函数嵌套到新函数里面.以后就可以在执行新函数的 ...

  7. Java 程序优化：字符串操作、基本运算方法等优化策略（二）

    五.数据定义.运算逻辑优化 多使用局部变量 调用方法时传递的参数以及在调用中创建的临时变量都保存在栈 (Stack) 里面,读写速度较快. 其他变量,如静态变量.等,都在堆实例变量 (heap) 中创 ...

  8. volley_之基本使用

    Volley的基本使用-------------- 本人初学,如有纰缪,望指正~ Volley是Google在2003年的I/O大会上推出的通信框架,结合了AsyncHttpClient和Univer ...

  9. javascript里for循环的一些事情

    今天在给一个学妹调她的代码BUG时,她的问题就是在一个for循环里不清楚流程的具体流向,所以导致了页面怎么调都是有问题,嗯确实你如果不清楚语句流向很轻易就会出问题,所以说for循环不会用或者说用的不恰 ...

  10. 剑指Offer:面试题21——包含min函数的栈(java实现)

    问题描述: 定义栈的数据结构,请在该类型中实现一个能够得到栈的最小元素的min函数.在该栈中,调用min,push及pop的时间复杂度都是O(1). 思路:加入一个辅助栈用来存储最小值集合 (这里要注 ...