设置html文件输入的样式(范例)

・2 分钟阅读

<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的右上角
  • 文件输入通过设置不透明度使不可见
学以致用 profile image