如何自定义 <input type="file" /> 样式

Question

之前一直都是用CSS做一个按钮，然后将 <input type="file" /> 透明度设置为0，覆盖在这个按钮之上，这样点击区域就能弹出选择文件的窗口。

可是，这种情况原按钮的hover和active效果就没了。
前几个月看到一篇文章，好像是控制input字体大小实现的，同时能保留后方的自定义按钮效果，不过找不到了。
不知道大家有什么解决方法？

Answer 1

以下是对bootstrap的file的包装，思路供参考。

<input id="lefile" type="file" style="display:none">
<div class="input-append">
   <input id="photoCover" class="input-large" type="text">
   <a class="btn" onclick="$('input[id=lefile]').click();">Browse</a>
</div>
 
<script type="text/javascript">
$('input[id=lefile]').change(function() {
   $('#photoCover').val($(this).val());
});
</script>

Answer 2

http://lepture.com/work/inputfile

Answer 3

哎呀，都不看lz的问题么，lz不是问怎么实现。。。。

lz问的是这样实现的时候怎么让按钮有hover效果。。。

其实很简单，给透明的input绑定个mouseenter事件，然后给下面的按钮加亮，mouseleave的时候恢复就行了。。。只是要稍微麻烦点。。。

Answer 4

可以通过定位在<input type="file" /> 下方放一个等大小的元素span，然后将<input type="file" /> 的透明度设置成0。这样看上去就是span元素的样式，但是点击的是<input type="file" /> 有一些jq插件就是这个原理

Answer 5

表示歉意。js去触发file是被浏览器禁止。层层叠加吧~兼容好

Answer 6

外面套一层标签就可以了,比如用div，把input和button包住，然后给div绑定触碰或者直接用css写hover，要改变button的样式很简单，css是div:hover button{}

Answer 7

加个样式在后面就行了。

Answer 8

<style>
a {
    display: inline-block;
    width: 100px;
    height: 40px;
    background: red;
    position: relative;
    overflow: hidden;
}

a:hover {
    background: green;
}

input {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 100px;
    opacity: 0;
    filter: alpha(opacity=0);
}
</style>