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:;

    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

input美化问题的相关教程结束。