$ (' .new_Btn ') .click(函数(){ $ (' # html_btn ') .click (); })； .new_Btn { // CSS属性 ｝ # html_btn { 显示:没有; ｝ < script src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js " > < /脚本> < div class = " new_Btn”> SelectPicture < / div > < br > <input id="html_btn" type='file' /><br> .

你也可以在没有jQuery的情况下使用正常的JavaScript实现你的目标。

现在newBtn与html_btn链接，你可以像你想要的那样样式你的新btn:D

我能够做到这与纯CSS使用下面的代码。我已经使用了bootstrap和font-awesome。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" /> <label class="btn btn-default btn-sm center-block btn-file"> <i class="fa fa-upload fa-2x" aria-hidden="true"></i> . <input type="file" style="display: none;"> < / >标签

可能会有很多牛角。但我喜欢在纯CSS中使用fa-buttons:

.divs { position: relative; display: inline-block; background-color: #fcc; } .inputs { position:absolute; left: 0px; height: 100%; width: 100%; opacity: 0; background: #00f; z-index:999; } .icons { position:relative; } <div class="divs"> <input type='file' id='image' class="inputs"> <i class="fa fa-image fa-2x icons"></i> </div> <div class="divs"> <input type='file' id='book' class="inputs"> <i class="fa fa-book fa-5x icons"></i> </div> <br><br><br> <div class="divs"> <input type='file' id='data' class="inputs"> <i class="fa fa-id-card fa-3x icons"></i> </div> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

小提琴:https://jsfiddle.net/zoutepopcorn/v2zkbpay/1/

我发现插件解决方案太笨重了，所以我制作了自己的jQuery插件Drolex FileStyle。

This plug-in allows you to style file input fields however you want. Actually, you style div elements to look like a tricked out file input, and the actual file input is automatically overlaid with 0% opacity. No additional HTML is required. Just include the css and js files in the page you want Drolex FileStyle and that's it! Edit the css file to your liking. Don't forget the jQuery library if your page doesn't already have it. If the client does not run JavaScript, then the file input will not be modified by js or css.

测试工作在Chrome 24, Firefox 18, Internet Explorer 9。 预计可以在之前的版本中使用。

下载:http://web.drolex.net/Drolex-FileStyle.zip。

 <label>
    <input type="file" />
 </label>

您可以将input type="file"包装在输入的标签中。样式标签，无论你喜欢和隐藏输入display: none;

一个快速粗暴的方法是将标签设置为按钮，并将位置设置为绝对，这样它就会浮动在原始按钮上，你仍然可以看到文件名。不过，我正在考虑移动解决方案。