设置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的右上角
- 文件输入通过设置不透明度使不可见