checkbox-适合移动端的checkbox

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>checkbox-适合移动端的checkbox</title>
    <script src="http://www.css88.com/b-mui/assets/codeprettify/prettify.js" type="text/javascript"></script>
    <style>
        h3 {
            margin: 10px 0 10px 0;
            font-size: 20px;
        }

body {
            padding: 10px;
            font-size: 12px;
        }

.example-con {
            margin-top: 30px;
        }

.mui-checkbox-con {
            margin-top: 10px;
            font-size: 16px;
        }
        .mui-checkbox-con label{display: block}
		
		
		@charset "UTF-8";
/*字体文件*/
@font-face {
  font-family: 'iconfont';
  /* IE9*/
  src: url("http://at.alicdn.com/t/font_1433757735_1585197.eot");
  /* IE6-IE8 */
  src: url("http://at.alicdn.com/t/font_1433757735_1585197.eot?#iefix") format("embedded-opentype"), url("http://at.alicdn.com/t/font_1433757735_1585197.woff") format("woff"), url("http://at.alicdn.com/t/font_1433757735_1585197.ttf") format("truetype"), url("http://at.alicdn.com/t/font_1433757735_1585197.svg#iconfont") format("svg"); }
.iconfont {
  display: inline-block;
  font-family: 'iconfont';
  font-style: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-text-stroke-width: 0.2px; }

.icon-lg {
  font-size: 16px; }

.icon-2x {
  font-size: 24px; }

.icon-3x {
  font-size: 32px; }

.icon-4x {
  font-size: 48px; }

.icon-5x {
  font-size: 64px; }

.iconfont.ma-left {
  margin-left: 3px; }

.iconfont.ma-right {
  margin-right: 3px; }

.icon-spin {
  animation: icon-spin 2s infinite linear; }

.icon-pulse {
  animation: icon-spin 1s infinite steps(8); }

@-webkit-keyframes icon-spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(359deg); } }
@keyframes icon-spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(359deg); } }
.icon-rotate-90 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation = 1);
  transform: rotate(90deg); }

.icon-rotate-180 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation = 2);
  transform: rotate(180deg); }

.icon-rotate-270 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation = 3);
  transform: rotate(270deg); }

.icon-flip-horizontal {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
  transform: scale(-1, 1); }

.icon-flip-vertical {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
  transform: scale(1, -1); }

:root .icon-rotate-90,
:root .icon-rotate-180,
:root .icon-rotate-270,
:root .icon-flip-horizontal,
:root .icon-flip-vertical {
  filter: none; }

/*# sourceMappingURL=iconfont.css.map */

.mui-checkbox {
  position: relative;
  width: 25px;
  height: 25px;
  margin-right: 10px;
  background-color: #FFFFFF;
  border: solid 1px #d9d9d9;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  background-clip: padding-box;
  display: inline-block;
  -webkit-appearance: none; }
  .mui-checkbox:focus {
    outline: 0 none;
    outline-offset: -2px; }
  .mui-checkbox:checked {
    background-color: #18b4ed;
    border: solid 1px #FFFFFF; }
    .mui-checkbox:checked:before {
      display: inline-block;
      margin-top: 1px;
      margin-left: 2px;
      font-family: iconfont;
      content: "\e667";
      line-height: 22px;
      color: #FFFFFF;
      font-size: 18px; }
  .mui-checkbox:disabled {
    background-color: #d9d9d9;
    border: solid 1px #d9d9d9; }
    .mui-checkbox:disabled:before {
      display: inline-block;
      margin-top: 1px;
      margin-left: 2px;
      font-family: iconfont;
      content: "\e667";
      line-height: 22px;
      color: #FFFFFF;
      font-size: 18px; }
  .mui-checkbox.checkbox-green:checked {
    background-color: #5cb85c; }
  .mui-checkbox.checkbox-orange:checked {
    background-color: #f0ad4e; }
  .mui-checkbox.checkbox-s {
    width: 19px;
    height: 19px; }
    .mui-checkbox.checkbox-s:before {
      display: inline-block;
      margin-top: 1px;
      margin-left: 2px;
      font-family: iconfont;
      content: "\e667";
      line-height: 17px;
      color: #FFFFFF;
      font-size: 13px; }

.mui-checkbox-anim {
  transition: background-color ease 0.2s; }

/*# sourceMappingURL=mui-checkbox.css.map */

/* Tomorrow Night Eighties Theme */
/* Original theme - https://github.com/chriskempson/tomorrow-theme */
/* css88 0.1*/

.prettyprint,pre.prettyprint {
    background-color: #444444;
    border: 1px solid #272822;
    overflow: hidden;
    padding: 0px;
    margin: 20px 0;
    font: 14px/20px 'courier new';
    color: #666;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.prettyprint.linenums,
pre.prettyprint.linenums {
  /*-webkit-box-shadow: inset 40px 0 0 #39382E, inset 41px 0 0 #464741;
  -moz-box-shadow: inset 40px 0 0 #39382E, inset 41px 0 0 #464741;
  box-shadow: inset 40px 0 0 #39382E, inset 41px 0 0 #464741;*/
}
.prettyprint .linenums ol,
pre.prettyprint .linenums ol {
    margin: 0 0 0 33px;
    list-style: decimal;
}
.prettyprint .linenums ol li,
pre.prettyprint .linenums ol li {
    padding-left: 12px;
  color: #bebec5;
  line-height: 20px;
  margin-left: 0;
  list-style: decimal;
}
.prettyprint ol.linenums{
    margin-left: 48px;
    margin-bottom: 0;
/*margin-bottom: -8px; margin-top:-8px; margin-right: -8px; position:relative;*/
    background-color: #272822; padding: 8px;
    list-style: decimal;
}
.prettyprint ol.linenums li,
pre.prettyprint ol.linenums li {
   /* padding-left: 12px;*/
  color: #bebec5;
  line-height: 20px;
  margin-left: 0;
  list-style: decimal;
}
.prettyprint .com { color: #93a1a1; }
.prettyprint .lit { color: #AE81FF; }
.prettyprint .pun,
.prettyprint .opn,
.prettyprint .clo { color: #F8F8F2; }
.prettyprint .fun { color: #dc322f; }
.prettyprint .str,
.prettyprint .atv { color: #E6DB74; }
.prettyprint .kwd,
.prettyprint .tag { color: #F92659; }
.prettyprint .typ,
.prettyprint .atn,
.prettyprint .dec,
.prettyprint .var { color: #A6E22E; }
.prettyprint .pln { color: #66D9EF; }

</style>
</head>

<div class="mui-tab-con clearfix">
        <form class="mui-form" name="" method="post" action="#" id="">
            <fieldset>
                <legend>表单标题</legend>
                <div class="mui-checkbox-con">
                    <label>
                        <input class="mui-checkbox" type="checkbox">默认未选中</label>
                </div>
                <div class="mui-checkbox-con">
                    <label>
                        <input class="mui-checkbox" type="checkbox" checked>默认选中</label>
                </div>
                <div class="mui-checkbox-con">
                    <label>
                        <input class="mui-checkbox checkbox-orange" type="checkbox" checked>橘黄色 checkbox-orange</label>
                </div>
                <div class="mui-checkbox-con">
                    <label>
                        <input class="mui-checkbox checkbox-green" type="checkbox" checked>绿色 checkbox-green</label>
                </div>
                <div class="mui-checkbox-con">
                    <label>
                        <input class="mui-checkbox" type="checkbox" disabled>禁用</label>
                </div>
            </fieldset>
        </form>
    </div>
<pre class="prettyprint lang-html linenums:1">
<div class="mui-checkbox-con">
    <label>
        <input class="mui-checkbox" type="checkbox">默认未选中</label>
</div>
<div class="mui-checkbox-con">
    <label>
        <input class="mui-checkbox" type="checkbox" checked>默认选中</label>
</div>
<div class="mui-checkbox-con">
    <label>
        <input class="mui-checkbox checkbox-orange" type="checkbox" checked>橘黄色 checkbox-orange</label>
</div>
<div class="mui-checkbox-con">
    <label>
        <input class="mui-checkbox checkbox-green" type="checkbox" checked>绿色 checkbox-green</label>
</div>
<div class="mui-checkbox-con">
    <label>
        <input class="mui-checkbox" type="checkbox" disabled>禁用</label>
</div>
</pre>
</div>
<div class="example-con">
    <h3>背景过渡效果的checkbox</h3>
    <p>增加 <code>mui-checkbox-anim</code>类;</p>
    <p>   border等其他属性不做过渡效果，目的是增加视觉差，更有动画效果</p>

<div class="mui-tab-con clearfix">
        <form class="mui-form" name="" method="post" action="#" id="">
            <fieldset>
                <legend>表单标题</legend>
                <div class="mui-checkbox-con">
                    <label>
                        <input class="mui-checkbox mui-checkbox-anim" type="checkbox">默认未选中</label>
                </div>
                <div class="mui-checkbox-con">
                    <label>
                        <input class="mui-checkbox mui-checkbox-anim" type="checkbox" checked>默认选中</label>
                </div>
                <div class="mui-checkbox-con">
                    <label>
                        <input class="mui-checkbox mui-checkbox-anim checkbox-orange" type="checkbox" checked>橘黄色 checkbox
                        -orange</label>
                </div>
                <div class="mui-checkbox-con">
                    <label>
                        <input class="mui-checkbox mui-checkbox-anim checkbox-green" type="checkbox" checked>绿色 checkbox-green</label>
                </div>
                <div class="mui-checkbox-con">
                    <label>
                        <input class="mui-checkbox mui-checkbox-anim" type="checkbox" disabled>禁用</label>
                </div>
            </fieldset>
        </form>
    </div>
<pre class="prettyprint lang-html linenums:1">
<div class="mui-checkbox-con">
    <label>
        <input class="mui-checkbox mui-checkbox-anim" type="checkbox">默认未选中</label>
</div>
<div class="mui-checkbox-con">
    <label>
        <input class="mui-checkbox mui-checkbox-anim" type="checkbox" checked>默认选中</label>
</div>
<div class="mui-checkbox-con">
    <label>
        <input class="mui-checkbox mui-checkbox-anim checkbox-orange" type="checkbox" checked>橘黄色 checkbox
        -orange</label>
</div>
<div class="mui-checkbox-con">
    <label>
        <input class="mui-checkbox mui-checkbox-anim checkbox-green" type="checkbox" checked>绿色 checkbox-green</label>
</div>
<div class="mui-checkbox-con">
    <label>
        <input class="mui-checkbox mui-checkbox-anim" type="checkbox" disabled>禁用</label>
</div>
</pre>
</div>
<div class="example-con">
    <h3>小的复选框</h3>

<div class="mui-tab-con clearfix">
        <form class="mui-form" name="" method="post" action="#" id="">
            <fieldset>
                <legend>表单标题</legend>
                <div class="mui-checkbox-con">
                    <label>
                        <input class="mui-checkbox checkbox-s" type="checkbox">默认未选中</label>
                </div>
                <div class="mui-checkbox-con">
                    <label>
                        <input class="mui-checkbox checkbox-s" type="checkbox" checked>默认选中</label>
                </div>
                <div class="mui-checkbox-con">
                    <label>
                        <input class="mui-checkbox checkbox-s checkbox-orange" type="checkbox" checked>橘黄色 checkbox-orange</label>
                </div>
                <div class="mui-checkbox-con">
                    <label>
                        <input class="mui-checkbox checkbox-s checkbox-green" type="checkbox" checked>绿色
                        checkbox-green</label>
                </div>
                <div class="mui-checkbox-con">
                    <label>
                        <input class="mui-checkbox checkbox-green checkbox-s" type="checkbox" disabled>绿色 禁用</label>
                </div>
                <div class="mui-checkbox-con">
                    <label>
                        <input class="mui-checkbox checkbox-s" type="checkbox" disabled>禁用</label>
                </div>
            </fieldset>
        </form>
    </div>
<pre class="prettyprint lang-html linenums:1">
<div class="mui-checkbox-con">
    <label>
        <input class="mui-checkbox checkbox-s" type="checkbox">默认未选中</label>
</div>
<div class="mui-checkbox-con">
    <label>
        <input class="mui-checkbox checkbox-s" type="checkbox" checked>默认选中</label>
</div>
<div class="mui-checkbox-con">
    <label>
        <input class="mui-checkbox checkbox-s checkbox-orange" type="checkbox" checked>橘黄色 checkbox-orange</label>
</div>
<div class="mui-checkbox-con">
    <label>
        <input class="mui-checkbox checkbox-s checkbox-green" type="checkbox" checked>绿色
        checkbox-green</label>
</div>
<div class="mui-checkbox-con">
    <label>
        <input class="mui-checkbox checkbox-green checkbox-s" type="checkbox" disabled>绿色 禁用</label>
</div>
<div class="mui-checkbox-con">
    <label>
        <input class="mui-checkbox checkbox-s" type="checkbox" disabled>禁用</label>
</div>
</pre>
</div>


</body>
</html>