对于前端来说，一个比较大的问题是，当HTML提供的最原始的控件长的很丑可是又没有相应的属性去更改，碰到这个问题时我们应该怎么办？比如radio的那个单选框我觉得好丑啊，怎么办呢？一个很好的思路就是把它隐藏掉（透明度设为0），用美观的图片或者能用CSS3来实现的东西代替，而实际的触发事件还是传给被隐藏的原始控件。
（先把之前的按钮透明度opacity设置为0,然后，外层用div包裹，就实现了美化功能。）
之前碰到一个问题就是HTML中的<input type="file" />这个问题，当时同事问我，我一下也想不出头绪，后来同事给解决了，就是把这个input给隐藏掉用新的div写一个button出来然后将点击事件传给被隐藏掉的input，机智！于是我就自己查了一下，记录下来。
我们在做input文本上传的时候，html自带的上传按钮比较丑，如何对其进行美化呢？同理：input checkbox美化，input radio美化是一个道理的。
HTML布局
<a href="javascript:;" class="a-upload">
<input type="file" name="" id="">点击这里上传文件
</a>
CSS样式，具体颜色线条样式不写，只写关键样式
.a-upload {
cursor: pointer;
display: inline-block;
*display: inline;
*zoom: 1
}
.a-upload input {
opacity:;
filter: alpha(opacity=0);
}
.a-upload:hover {
text-decoration: none
}
radio同理
HTML
<span class="test_list_span on">
<input type="radio" checked="checked" name="truelist" value="1" class="true_list">
</span>
CSS
.test_list_span {
cursor: pointer;
text-align: center;
background-image: url(images/test-img_unselected.gif);
background-repeat: no-repeat;
}
.true_list {
opacity:;
cursor: pointer;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
.on {
background-image: url(images/test-img_selected.gif);
}
文章来源：
http://www.haorooms.com/post/css_input_uploadmh
http://www.haorooms.com/post/css_mh_ck_radio