抄自： 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. leetcode51. N-Queens

    The n-queens puzzle is the problem of placing n queens on an n×n chessboard such that no two queens ...

  2. 这些 Git 技能够你用一年了

    这些 Git 技能够你用一年了 原文出处: Pyper 用git有一年了,下面是我这一年来的git使用总结,覆盖了日常使用中绝大多数的场景.嗯,至少是够用一年了,整理出来分享给大家,不明白的地方可以回 ...

  3. 第一篇T语言实例开发（版本5.3），带错误检测的加减乘除运算器

    带错误检测的加减乘除运算器 表达式 TC综合开发工具里的表达式大体分为:计算表达式.条件表达式 计算表达式: 它一般是用在赋值过程中,或者是和条件表达式混合使用这样的表达式里只有数字运算符(如:+.- ...

  4. 029. aps.net中DataView中详细信息的跳转显示

    点击当前页面的连接, 跳转到另一个页面, 然后进行更新删除等一系列操作 主要代码: <%@ Page Language="C#" AutoEventWireup=" ...

  5. maxscript, 批量导出物体

    1,将场景中所有选中物体整体导出为一个fbx文件 exportfile filename #noprompt selectedOnly:true using:FBXEXP 2,将场景中所有选中物体各导 ...

  6. 需求文档2_The Battle of Polytopia

    需求文档 ------------------------------------- 1. 游戏详细分析 The Battle of Polytopia简要介绍 探索型.策略型的对战塔防游戏,回合制. ...

  7. IntelliJ IDEA15导入jar包

    在IDEA中导入jar包和eclipse中是不一样的,那么现在我们就来看看在IDEA中如何导入jar包. 1.点击"File"-->"Project Structu ...

  8. Func<T>与Action<T>委托泛型介绍

    .Net 3.5之后,微软推出了Func<T>与Action<T>泛型委托.进一步简化了委托的定义. Action<T>委托主要的表现形式如下: public de ...

  9. [转] Makefile经典教程(掌握这些足够)

    目录(?)[-] Makefile 介绍 1 Makefile的规则 2 一个示例 3 make是如何工作的 4 makefile中使用变量 5 让make自动推导 6 另类风格的makefile 7 ...

  10. [MySql] - 开启外部访问

    打开 mysql 的查询窗口(使用root),使用SQL: -- 使用mysql库 use mysql; -- 更新密码 update user set password=PASSWORD('xxxx ...