input美化问题

对于前端来说，一个比较大的问题是，当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: 0;
    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: 0;
    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