复选框/单选按钮/input file上传按钮的美化

1.复选框第一种:代码写的对勾

<style type="text/css">
       .ccc{ position:relative; }
       .ccc input[type=checkbox] {visibility: hidden; position: absolute; top: 21px;left: 18px;}  
       .ccc label{ cursor: pointer;position: absolute;width: 15px; height: 15px;  top: 21px;left: 18px; background: #fff; border:2px solid #ccc; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius:3px; }  
       .ccc label:after{ opacity: 0;content: '';position: absolute; width: 9px;height: 5px;background: transparent;top: 3px; left: 2px;border: 2px solid #333; border-top: none;border-right: none; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg);   -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg);transform: rotate(-45deg);}
      .ccc input[type=checkbox]:checked + label:after {opacity: 1; }
 </style>
 <div class="ccc">
      <input type="checkbox" value="2" id="checkbox2" name="check"/>  
      <label for="checkbox2"></label>
 </div>

第二种:可用图片替代/jq控制选中

<style type="text/css">
     .piaochecked {width: 20px; height:20px; float: left;margin-left: 10px;text-align: center; border:2px solid #ccc; background:#FFF; }
     .on_check { border:2px solid red; }
     .radioclass {width: 20px; height:20px; opacity: 0;cursor: pointer;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";}

</style>
 <div class="piaochecked">
        <input name="need_inv" type="checkbox" class="radioclass input" value="1">
 </div>
 <script type="text/javascript">
       $(".piaochecked").on("click",function(){
              $(this).hasClass("on_check")? $(this).removeClass("on_check"):$(this).addClass("on_check");
         })
 </script>

2.单选框

<span class="pay_list_c1 on">
<input type="radio" checked="checked" name="paylist" value="1" class="radioclass">
</span>
<style type="text/css"> 
.pay_list_c1 {width: 24px;height: 18px;float: left;padding-top: 3px;cursor: pointer;text-align: center;margin-right: 10px;background-repeat: no-repeat;background-position: -24px 0;}
.radioclass {opacity: 0;cursor: pointer;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);}
.on {background-position: 0 0;}
</style>
<script type="text/javascript"> 
$(".pay_list_c1").on("click",function(){
  $(this).addClass("on").siblings().removeClass("on");
})
</script>
3.上传按钮

<a href="javascript:;" class="file">选择文件
    <input type="file" name="" id="">
</a>

.file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
}
.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}
.file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
}