抄自： 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. Azure媒体服务的Apple FairPlay流功能正式上线

    在此我们高兴地宣布,Azure FairPlay Streaming服务已正式商用. FairPlay允许用户轻松构建解决方案,并可扩展到最新版本的Apple TV.Azure媒体服务可以结合现有的P ...

  2. C++中的vector

    opencv中用到了很多vector  整理一下 vector容器是一个模板类,可以存放任何类型的对象(但必须是同一类对象).vector对象可以在运行时高效地添加元素,并且vector中元素是连续存 ...

  3. UVa 10562看图写树（二叉树遍历）

    https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  4. POJ-3261 Milk Patterns（后缀数组）

    题目大意:找出至少出现K次的子串的最长长度. 题目分析:二分枚举长度x,判断有没有最长公共前缀不小于x的并且连续出现了至少k次的有序子串区间. 代码如下: # include<iostream& ...

  5. ubuntu 使用wine卸载软件

    现在的网络应用许多被windows绑架了,有时候不得不下载一些.exe的的东西在ubuntu下载配合一下,但是后来我想卸载这些.exe应用程序,于是百度了一下,一位博主写的好,如下,晒出来: cd ~ ...

  6. kuangbin_SegTree A (HDU 1166)

    大牛们的文章里这句 题意:O(-1) 思路:O(-1) 深深地嘲讽了我........ 不过单点更新 区间求和也算是基本操作了吧 (虽然我还是看了好久才理解) 跟之前学图论的时候感觉完全不一样啊orz ...

  7. 【转】Reactor与Proactor两种模式区别

    转自:http://www.cnblogs.com/cbscan/articles/2107494.html 两种IO多路复用方案:Reactor and Proactor 一般情况下,I/O 复用机 ...

  8. Longest Substring Without Repeating Characters -- LeetCode

    原题链接: http://oj.leetcode.com/problems/longest-substring-without-repeating-characters/ 这道题用的方法是在LeetC ...

  9. 【AT91SAM3S】SAM3S-EK Demo工程中，LCD驱动程序的加载(函数指针结构体)

    为了调试LCD,在英倍特的板子上烧Atmel的sam3s-ek_demo_1.4_source示例代码.LCD显示正常了,却找不到LCD的驱动究竟在哪. 花了好久,追踪到了这个执行过程. 进入main ...

  10. 操作系统中前台进程与后台进程(适用于Linux)

    两种进程的主要区别: 1.前台进程用户可以操作,后台进程用户不能操作(除了把它关闭). 2.前台进程不全是由计算机自动控制,后台进程全都是由计算机自动控制. 3.后台进程一般用作系统服务,可以用cro ...