html input[type=file] css样式美化

额，今天在做项目的时候遇到了这个问题，测试人员发现因为没有统一上传按钮，导致页面的样式出现混乱了，丑陋不堪。所以决定做一个新的上传按钮。

原始的样式基本是这样的:

现在要修改的样式为（假设）：

相信做前端的都知道了，input[type=file]和其他输入标签不一样，它的事件必须是在触发自身元素上，而不能是其他元素。所以不能简单的把input隐藏，放个button上去。

所以基本结构是这样的：

点击上传
    

最外层一个a包裹着这个input，样式为：

a{
    position: absolute;
    left: 0;
    top:2px;
    width: 100px;
    height: 24px;
    border: 1px solid #aaa;
    text-align: center;
    background: #ddd;
    line-height: 24px;
    cursor: pointer;
    overflow: hidden;
    color: #888;
    border-radius: 4px;
    text-decoration: none;
}
a:hover{
    background: #eee;
    color:#000;
    border-color: #444;
    text-decoration: none;
}
input{
    filter:alpha(opacity=0);
    opacity: 0;
    position: absolute;
    right: 0;
    top:0;
    width: 200px;
    height: 20px;
    cursor: pointer;
}

其原理是把input的透明度设置为0，然后a设置绝对定位，宽高限定，隐藏超过的input。

但是这样的话，鼠标移动到a上面是显示default手型的，而不是pointer。在input设置为pointer的时候，只有右边部分鼠标手型是pointer。所以还必须把input的绝对位置右距离为0即可。

还有需要注意的是，必须把input的hidefocus设置为true，因为ie下面会给input选中后加个虚线边框。

你可以点击demo。

演示图（上修改，下默认）：