checkbox的美化(转)

最新推荐文章于 2021-08-30 16:11:46 发布

weixin_30505751

最新推荐文章于 2021-08-30 16:11:46 发布

阅读量70

点赞数

原文链接：http://www.cnblogs.com/qq21270/p/3793266.html

版权

checkbox的美化(转)

http://www.w3cfuns.com/blog-5422889-5398674.html

<!DOCTYPE html>
<html>
 <head>  
  <meta charset="utf-8" />
  <style>
    .p_check{position:relative;display:inline-block;width:18px;height:18px;border:2px solid #FF6980;vertical-align:middle;}
    .p_check input{opacity:0;}
    .p_check input+span{display:none;position:absolute;left:0;top:0;width:100%;height:100%;background-color:#FF6980;}
    .p_check input+span:after{display:inline-block;content:"";margin:4px 0 0 7px;width:4px;height:8px;border:2px solid #FFF;border-left-width:0;border-top-width:0;vertical-align:top;
    transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    }
    .p_check input:checked+span{display:inline-block;}
  </style>
 </head>
 <body>
      <p>
         <label class="p_check"><input type="checkbox" checked="checked" value="" /><span></span></label>
         <a>哈哈哈哈哈哈</a>
       </p>
       <p>
         <label class="p_check"><input type="checkbox"  value="" /><span></span></label>
         <a>呵呵呵呵呵呵</a>
       </p>
 </body>
</html>