修改 input[type=checkbox] 默认样式

html

<input type="checkbox">

css

input[type="checkbox"]{
position: relative;
}
input[type="checkbox"]:before{
position: absolute;
content: " ";
width:24px;
height: 24px;
border-radius:50%;
border:1px solid #dedede; 
top:-7px;
left:-7px;
background-color: #fff;
}
input[type="checkbox"]:checked:after{
position: absolute;
content: "";
width:15px;
height: 15px;
border-radius:50%;
background-color: red;
top:-2px;
left:-2px;
}

html

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

</a>

css

.input-file {
position: relative;
display: inline-block;
background: #f60;
border: 1px solid #f50;
border-radius: 2px;
overflow: hidden;
color: #fff;
font-size:20px;
text-decoration: none;
line-height: 20px;
text-align:center;

}

.input-file input[type=file] {
 position: absolute;
font-size: 100px;
right: 0;

top: 0;

opacity:0;

}

.input-file:hover {
background: #f50;
border-color: #f50;
color: #fff;
text-decoration: none;

}