input file 美化

1.input file 美化的基本思想是 将 <input type="file" /> 的样式 opacity: 0;也就是透明度为零。

 

2.本人推荐一种办法：

<input type="file" id="file" class="input-file" />
<label for="file" >选择文件</label>

 这样之后点击<label>这个标签也会触发上传文件。接下来就是样是的问题了。

 

3.清除<input>的占位。

.input-file {
    width: 0.1px; 
    height: 0.1px; 
    opacity: 0; 
    overflow: hidden; 
    position: absolute; 
    z-index: -1;
}

这样就连占位也没有，然后你就可以通过美化<label>了显示上传按钮了。