<input type= "file" class= "custom-style" />

如果你认为让这个输入标签看起来漂亮只是一些CSS的问题，请三思。

问题

文件输入元素很丑陋，每个浏览器都会以不同的方式显示，不幸的是，CSS只能样式化这个元素，我通常想要更多的东西。

实现自定义样式的最佳解决方案是创建一个新元素（可能是一个按钮）单击该元素时会触发此输入元素上的click事件。

适用于大多数浏览器。

解决方案

隐形地将实际文件输入元素悬停在漂亮的样式按钮上。

 

<div class= "file-input-wrapper"> 
 <button class= "btn-file-input"> Upload File</button>
 <input type= "file" name= "file" />
</div>
<style>
 . file-input-wrapper {
 width: 200px;
 height: 40px;
 overflow: hidden;
 position: relative;
 }
 . file-input-wrapper> input[type= "file" ] {
 font-size: 200px;
 position: absolute;
 top: 0;
 right: 0;
 opacity: 0;
 }
 . file-input-wrapper> . btn-file-input {
 display: inline-block;
 width: 200px;
 height: 40px;
 }

你可以在JSFiddle上播放此设置
http://jsfiddle.net/supershabam/b3WXe/，

关键部分：

• wrapper的宽度和高度
• wrapper overflow隐藏
• 文件输入的font-size设置的非常高
• 文件输入定位到wrapper的右上角
• 文件输入通过设置不透明度使不可见