修改 input type=file 的样式的最简单方法

很多人说网页中​

​<input type="file">​

​​的样式是很难修改的，事实上也是，​

​bootstrap​

​也没用对其有什么美化，但是那么丑，要怎么修改呢？

其实很简单！！！很多人都想复杂了。

先卖个关子，有些人是这么做的，另外写一个按钮的样式，然后将自己写的按钮和这个默认的样式的定位改为重合，并将默认的按钮设置​

​opacity:0​

​​，即设置透明度为完全透明，这样就可以在表面上是点击自己定义的样式，而实际上是点击​

​input​

​这个按钮

可是让这两个东西完全重合，不是很麻烦的一件事情么，这个想法可以去回答知乎的：有哪些看似精妙实际很蠢的设计

从上面的方法中得到了如下思路，下面进入最简单的方法：

1、重写一个新的样式

2、将默认样式设置​​

​display:none;​

​​，即设为不可见

3、在js里调用：当点击新样式的时候，调用这个​​

​input​

​的点击事件

这就完啦！！！何必还要多此一举将两个东西设为完全重合呢，写新样式就完全可以放飞自我啦

下面附上简单的代码吧，我的js用了jquery框架

html

<div class="head-img">
    <img src="./imgs/王小波.jpg" id="my-img">          
    <input type="file" id="img-upload"/>
</div>      

css

.head-img{
    text-align: center;
}

#img-upload{
    display: none;
}      

js/jquery

$(document).ready(function(){
    $('#my-img').click(function(){
        $('#img-upload').click();
    });

});