我能想到的唯一方法是在渲染后使用javascript找到按钮并为其分配样式

你也可以看看这篇文章

众所周知，样式化文件输入非常困难，因为大多数浏览器不会从CSS或javascript更改外观。

甚至输入的大小也不会响应以下内容：

<input type="file" style="width:200px">

相反，您需要使用size属性：

<input type="file" size="60" />

对于任何比这更复杂的样式（例如更改浏览按钮的外观），您将需要查看在本机文件输入之上覆盖样式按钮和输入框的棘手方法。rm在www.quirksmode.org/dom/inputfile.html中已经提到的文章是我见过的最好的一篇。

更新

虽然很难直接设置<input>标签的样式，但在<label>标签的帮助下，这很容易实现。请参阅下面@JoshCrozier的答案：https://stackoverflow.com/a/25825731/10128619

隐藏它与css和使用一个自定义按钮与$（选择器）.单击（）来激活浏览按钮.然后设置一个间隔来检查的值的文件输入类型.该间隔可以显示的值为用户所以用户可以看到什么得到上传.该间隔将清除当表单被提交[编辑]对不起我一直很忙的意思是要更新这篇文章，这里是一个例子

<form action="uploadScript.php" method="post" enctype="multipart/form-data"><div><!-- filename to display to the user --><p id="file-name" class="margin-10 bold-10"></p>
<!-- Hide this from the users view with css display:none; --><input class="display-none" id="file-type" type="file" size="4" name="file"/>
<!-- Style this button with type image or css whatever you wish --><input id="browse-click" type="button" class="button" value="Browse for files"/>
<!-- submit button --><input type="submit" class="button" value="Change"/></div>

$(window).load(function () {var intervalFunc = function () {$('#file-name').html($('#file-type').val());};$('#browse-click').on('click', function () { // use .live() for older versions of jQuery$('#file-type').click();setInterval(intervalFunc, 1);return false;});});

这对于jQuery来说很简单。给出一个瑞恩建议的代码示例，稍作修改。

基本html：

<div id="image_icon"></div><div id="filename"></div><input id="the_real_file_input" name="foobar" type="file">

请务必在准备好时设置输入的样式：opacity: 0您不能设置display: none，因为它需要可点击。但您可以将其放置在“new”按钮下，或者如果您愿意，可以使用z-index隐藏在其他东西下。

设置一些jQuery以在单击图像时单击真实输入。

$('#image_icon').click(function() {$('#the_real_file_input').click();});

现在您的按钮正在工作。只需在更改时剪切并粘贴值。

$('input[type=file]').bind('change', function() {var str = "";str = $(this).val();$("#filename").text(str);}).change();

你可能需要将val（）解析为更有意义的东西，但你应该一切就绪。

按照以下步骤，然后您可以为文件上传表单创建自定义样式：

1. 这是简单的超文本标记语言形式（请阅读我在下面写的超文本标记语言注释）

   <form action="#type your action here" method="POST" enctype="multipart/form-data"><div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" onclick="getFile()">Click to upload!</div><!-- this is your file input tag, so i hide it!--><div style='height: 0px;width:0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div><!-- here you can have file submit button or you can write a simple script to upload the file automatically--><input type="submit" value='submit' ></form>

2. then use this simple script to pass the click event to file input tag.

   function getFile(){document.getElementById("upfile").click();}

   现在您可以使用任何类型的样式，而不必担心如何更改默认样式。

我很清楚这一点，因为我已经尝试更改默认样式一个半月了。相信我，这很难，因为不同的浏览器有不同的上传输入标签。所以使用这个来构建您的自定义文件上传表单。这是完整的自动上传代码。

function getFile() {document.getElementById("upfile").click();}
function sub(obj) {var file = obj.value;var fileName = file.split("\\");document.getElementById("yourBtn").innerHTML = fileName[fileName.length - 1];document.myForm.submit();event.preventDefault();}

#yourBtn {position: relative;top: 150px;font-family: calibri;width: 150px;padding: 10px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border: 1px dashed #BBB;text-align: center;background-color: #DDD;cursor: pointer;}

<form action="#type your action here" method="POST" enctype="multipart/form-data" name="myForm"><div id="yourBtn" onclick="getFile()">click to upload a file</div><!-- this is your file input tag, so i hide it!--><!-- i used the onchange event to fire the form submission--><div style='height: 0px;width: 0px; overflow:hidden;'><input id="upfile" type="file" value="upload" onchange="sub(this)" /></div><!-- here you can have file submit button or you can write a simple script to upload the file automatically--><!-- <input type="submit" value='submit' > --></form>

CSS可以在这里做很多事情…用一点诡计…

<div id='wrapper'><input type='file' id='browse'></div><style>#wrapper {width: 93px; /*play with this value */height: 28px; /*play with this value */background: url('browseBtn.png') 0 0 no-repeat;border:none;overflow:hidden;}
#browse{margin-left:-145px; /*play with this value */opacity:0; /* set to .5 or something so you can better position it as an overlay then back to zero again after you're done */-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);}</style>

::参考ce::http://site-o-matic.net/?viewpost=19

-修道院

$('.new_Btn').click(function() {$('#html_btn').click();});

.new_Btn {// your css propterties}
#html_btn {display: none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="new_Btn">SelectPicture</div><br><input id="html_btn" type='file' /><br>

您也可以在没有jQuery和普通JavaScript的情况下实现您的目标。

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

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

您可以将输入type="file"包装在输入的标签中。随意设置标签的样式，并使用显示：无隐藏输入；

用于自动检测输入[文件]和样式的teshguru脚本的jQuery版本

<html><head><script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script><style>#yourBtn{position: relative;top: 150px;font-family: calibri;width: 150px;padding: 10px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border: 1px dashed #BBB;text-align: center;background-color: #DDD;cursor:pointer;}</style><script type="text/javascript">$(document).ready(function(){$('input[type=file]').each(function(){$(this).attr('onchange',"sub(this)");$('<div id="yourBtn" onclick="getFile()">click to upload a file</div>').insertBefore(this);$(this).wrapAll('<div style="height: 0px;width: 0px; overflow:hidden;"></div>');});});function getFile(){$('input[type=file]').click();}function sub(obj){var file = obj.value;var fileName = file.split("\\");document.getElementById("yourBtn").innerHTML = fileName[fileName.length-1];}</script></head><body><?phpvar_dump($_FILES);?><center><form action="" method="post" enctype="multipart/form-data" name="myForm">
<input id="upfile" name="file" type="file" value="upload"/><input type="submit" value='submit' ></form></center></body></html>

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

这个插件允许您随心所欲地设置文件输入字段的样式。实际上，您将div元素设置为看起来像一个欺骗的文件输入，实际的文件输入会自动以0%的不透明度覆盖。不需要额外的超文本标记语言。只需在您想要Drolex FileStyle的页面中包含css和js文件即可！根据您的喜好编辑css文件。如果您的页面还没有jQuery库，请不要忘记它。如果客户端不运行JavaScript，那么文件输入将不会被js或css修改。

测试可在Chrome24，Firefox 18，Internet Explorer 9中工作。希望在这些和其他的早期版本中工作。

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

这是一个简单的仅限css的解决方案，它创建了一个一致的目标区域，并允许您随心所欲地设置人造元素的样式。

基本思想是这样的：

1. 将两个“假”元素（文本输入/链接）作为真实文件输入的兄弟姐妹。绝对定位它们，使它们完全位于目标区域的顶部。
2. 用div包装您的文件输入。将溢出设置为隐藏（因此文件输入不会溢出），并使其完全符合您希望的目标区域大小。
3. 将文件输入的不透明度设置为0，使其隐藏但仍可单击。给它一个大字体，以便您可以单击目标区域的所有部分。

这是jsfiddle：http://jsfiddle.net/gwwar/nFLKU/

<form><input id="faux" type="text" placeholder="Upload a file from your computer" /><a href="#" id="browse">Browse </a><div id="wrapper"><input id="input" size="100" type="file" /></div></form>

使用jQuery的一个非常聪明的解决方案，适用于所有旧浏览器和新浏览器，我发现这里。它使用实际的文件浏览按钮来处理所有样式和单击（）问题。我做了一个普通的javascript版本：小提琴解决方案就像天才一样简单：使文件输入不可见，并使用一段代码将其放置在鼠标器下。

<div class="inp_field_12" onmousemove="file_ho(event,this,1)"><span>browse</span><input id="file_1" name="file_1" type="file" value="" onchange="file_ch(1)"></div><div id="result_1" class="result"></div><script>function file_ho(e, o, a) {e = window.event || e;var x = 0,y = 0;if (o.offsetParent) {do {x += o.offsetLeft;y += o.offsetTop;} while (o = o.offsetParent);}var x1 = e.clientX || window.event.clientX;var y1 = e.clientY || window.event.clientY;var le = 100 - (x1 - x);var to = 10 - (y1 - y);document.getElementById('file_' + a).style.marginRight = le + 'px';document.getElementById('file_' + a).style.marginTop = -to + 'px';}</script><style>.inp_field_12 {position:relative;overflow:hidden;float: left;width: 130px;height: 30px;background: orange;}.inp_field_12 span {position: absolute;width: 130px;font-family:'Calibri', 'Trebuchet MS', sans-serif;font-size:17px;line-height:27px;text-align:center;color:#555;}.inp_field_12 input[type='file'] {cursor:pointer;cursor:hand;position: absolute;top: 0px;right: 0px;-moz-opacity:0;filter:alpha(opacity=0);opacity: 0;outline: none;outline-style:none;outline-width:0;ie-dummy: expression(this.hideFocus=true);}.inp_field_12:hover {background-position:-140px -35px;}.inp_field_12:hover span {color:#fff;}</style>

当创建<input type="file">时，所有渲染引擎都会自动生成一个按钮。从历史上看，该按钮是完全不可样式的。然而，三叉戟和WebKit通过伪元素添加了钩子。

三叉戟

从IE10开始，文件输入按钮可以使用::-ms-browse伪元素来设置样式。基本上，您应用于常规按钮的任何CSS规则都可以应用于伪元素。例如：

::-ms-browse {background: black;color: red;padding: 1em;}

<input type="file">

This displays as follows in IE10 on Windows 8:

WebKit

WebKit provides a hook for its file input button with the ::-webkit-file-upload-button pseudo-element. Again, pretty much any CSS rule can be applied, therefore the Trident example will work here as well:

::-webkit-file-upload-button {background: black;color: red;padding: 1em;}

<input type="file">

This displays as follows in Chrome 26 on OS X:

<input type="file" name="media" style="display-none" onchange="document.media.submit()">

我通常会使用简单的javascript来自定义文件输入标签。一个隐藏的输入字段，点击按钮，javascript调用隐藏字段，简单的解决方案，没有任何css或一堆jQuery。

<button id="file" onclick="$('#file').click()">Upload File</button>

我找到了一个非常简单的方法将文件按钮切换为图片。您只需标记图片并将其放置在文件按钮的顶部。

<html><div id="File button"><div style="position:absolute;"><!--This is your labeled image--><label for="fileButton"><img src="ImageURL"></label></div><div><input type="file" id="fileButton"/></div></div></html>

单击标记的图像时，您选择文件按钮。

如果您正在寻找一个javascript库-开箱即用的解决方案，文件输入可以正常工作。

更新没关系，这在IE或它的新兄弟FF中不起作用。按预期适用于所有其他类型的元素，但不适用于文件输入。更好的方法是创建一个文件输入和一个链接到它的标签。使文件输入显示无和繁荣，它在IE9+中无缝工作。

警告：下面的一切都是垃圾！

通过使用针对其容器定位/调整大小的伪元素，我们可以像往常一样只使用一个输入文件（不需要额外的标记）和样式。

演示

<input type="file" class="foo"><style>.foo {display: block;position: relative;width: 300px;margin: auto;cursor: pointer;border: 0;height: 60px;border-radius: 5px;outline: 0;}.foo:hover:after {background: #5978f8;}.foo:after {transition: 200ms all ease;border-bottom: 3px solid rgba(0,0,0,.2);background: #3c5ff4;text-shadow: 0 2px 0 rgba(0,0,0,.2);color: #fff;font-size: 20px;text-align: center;position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: block;content: 'Upload Something';line-height: 60px;border-radius: 5px;}</style>

好好享受吧伙计们！

旧更新

把它变成了一个手写笔混音器。应该很容易让你们中的一个酷SCSS猫转换它。

    file-button(button_width = 150px)display blockposition relativemargin autocursor pointerborder 0height 0width 0outline none&:afterposition absolutetop 0text-align centerdisplay blockwidth button_widthleft -(button_width / 2)

用法：

<input type="file">
input[type="file"]file-button(200px)

正如金国和CorySimmons提到的，您可以使用可样式标签的可点击行为，隐藏不太灵活的文件输入元素。

<!DOCTYPE html><html><head><title>Custom file input</title><link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></head>
<body>
<label for="upload-file" class="btn btn-info"> Choose file... </label><input id="upload-file" type="file" style="display: none"onchange="this.nextElementSibling.textContent = this.previousElementSibling.title = this.files[0].name"><div></div>
</body></html>

你不需要JavaScript！这是一个跨浏览器的解决方案：

看看这个例子！-它适用于Chrome /FF/IE-（IE10/9/8/7）

最好的方法是将带有for属性的自定义标签元素附加到隐藏文件输入元素。（标签的for属性必须与文件元素的id匹配才能正常工作）。

<label for="file-upload" class="custom-file-upload">Custom Upload</label><input id="file-upload" type="file"/>

作为替代方案，您也可以直接用标签包装文件输入元素：（示例）

<label class="custom-file-upload"><input type="file"/>Custom Upload</label>

在样式方面，只需使用属性选择器隐藏¹输入元素。

input[type="file"] {display: none;}

然后您需要做的就是为自定义label元素设置样式。（示例）。

.custom-file-upload {border: 1px solid #ccc;display: inline-block;padding: 6px 12px;cursor: pointer;}

¹-值得注意的是，如果您使用display: none隐藏元素，它将无法在IE8及更低版本中工作。还要注意jQuery默认验证不验证隐藏字段的事实。如果这其中任何一件事对您来说都是问题，这里有两种不同的方法来隐藏在这些情况下工作的输入（<修>1，<修>2）。

这是一个解决方案，它还显示了所选的文件名：http://jsfiddle.net/raft9pg0/1/

超文本标记语言：

<label for="file-upload" class="custom-file-upload">Chose file</label><input id="file-upload" type="file"/>File: <span id="file-upload-value">-</span>

js：

$(function() {$("input:file[id=file-upload]").change(function() {$("#file-upload-value").html( $(this).val() );});});

css：

input[type="file"] {display: none;}
.custom-file-upload {background: #ddd;border: 1px solid #aaa;border-top: 1px solid #ccc;border-left: 1px solid #ccc;-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;color: #444;display: inline-block;font-size: 11px;font-weight: bold;text-decoration: none;text-shadow: 0 1px rgba(255, 255, 255, .75);cursor: pointer;margin-bottom: 20px;line-height: normal;padding: 8px 10px; }

这是一个交叉兼容的方法，适用于Chrome、Firefox、Safari和IE。

$(window).on('resize',function() {var eqw = $('input[type=text]').width();$('textarea').width(eqw - 32);$('.fileoutline').width(eqw);}).trigger('resize');
$('.file+.file').hide();
$(".file").click(function() {var input = $(this).next().find('input');input.click();});$("input[id='file1']").change(function () {$('.file+.file').show();var filename = $(this).val();$('.filename1').html(filename);$('.file').find('span').html('CHANGE FILE');});$("input[id='file2']").change(function() {var filename = $(this).val();$('.filename2').html(filename);$('.file').find('span').html('CHANGE FILE');});

form { width:55%;margin:0 auto;padding-left:3vw;text-align:left; }fieldset{border:0;margin:0;padding:0;}textarea{overflow: auto;height:25vh;resize:none;outline:none;width:93%;background:none;padding:8px 15px;display:block;text-align:left;border:1px solid #000;margin:0;color:#000;font:700 0.85em/2.2 'Futura Book',Arial,sans-serif;}input:focus{outline:none;}input[type=text]{font-weight:700;font-size:0.85em;line-height:2.2;background:none;text-align:left;letter-spacing:0.02em;height:33px;display:block;width:100%;border:none;border-bottom:1px solid #000;margin:0 0 28px;color:#000;}input:focus{outline:0;}.fileoutline { width:100%;margin:25px auto 0px;left:0;right:0;height:40px;border:1px solid #000;position:relative; }input[type=file] { -webkit-appearance: none;-moz-appearance:none;appearance: none;opacity:0;position:relative;width:100%;height:35px;font-weight:700;font-size:0.5em;line-height:28px;letter-spacing:0.2em;position: absolute;left: 0;top: 0;height: 100%;z-index:10; }.file,.filename1,.filename2,#submit { font-size:10px;letter-spacing:0.02em;text-transform:uppercase;color:#ffffff;text-align:center;width:35%;}.file,.filename1,.filename2 { font-weight:200;line-height:28px;}.filename1,.filename2 { width:375px;overflow:hidden;top:0;text-align:right;position:absolute;display:block;height:26px;color:#000;}.file { position:absolute;width:100px;top:6px;left:10px;background:#000;border-radius:14px; }::-webkit-file-upload-button,::-ms-browse { width: 100%;height:25px;opacity: 0;-webkit-appearance: none;appearance: none; }#submit{border:none;height:32px;background: #000;box-shadow:0 0 0 0.5px #fff,0 0 0 5px #000;margin:35px 0;float:right;display:block;}

<form action="" method="post" enctype="multipart/form-data"><input type="text" name="email" id="email" placeholder="Email address" /><input type="text"  type="text" name="name" id="title" placeholder="Name" /><textarea rows="7" cols="40" name="description" id="description" placeholder="Description"></textarea><div class="fileoutline"><div class="file"><span>CHOOSE FILE</span><input type="file" name="file[]" id="file1"><div class="filename1">NO CHOSEN FILE</div></div></div><div class="fileoutline"><div class="file"><span>CHOOSE FILE</span><input type="file" name="file[]" id="file2"><div class="filename2">NO CHOSEN FILE</div></div></div><input type="submit" name="submit" value="Submit" id="submit"></form>

最好的方法是使用伪元素：后或：前作为显示de输入的元素。然后根据需要设置伪元素的样式。我建议你对所有输入文件采用通用样式，如下所示：

input {height: 0px;outline: none;}
input[type="file"]:before {content: "Browse";background: #fff;width: 100%;height: 35px;display: block;text-align: left;position: relative;margin: 0;margin: 0 5px;left: -6px;border: 1px solid #e0e0e0;top: -1px;line-height: 35px;color: #b6b6b6;padding-left: 5px;display: block;}

这是一个解决方案，它并没有真正为<input type="file" />元素设置样式，而是在其他元素（可以设置样式）之上使用<input type="file" />元素。<input type="file" />元素并不真正可见，因此，整体错觉是一个样式良好的文件上传控件。

我最近遇到了这个问题，尽管Stack Overflow上有很多答案，但似乎没有一个真正符合要求。最后，我最终定制了这个，以便有一个简单而优雅的解决方案。

我还在Firefox，IE（11,10&9），Chrome和Opera，iPad和一些Android设备上进行了测试。

这是JSFiddle链接->http://jsfiddle.net/umhva747/

$('input[type=file]').change(function(e) {$in = $(this);$in.next().html($in.val());    
});
$('.uploadButton').click(function() {var fileName = $("#fileUpload").val();if (fileName) {alert(fileName + " can be uploaded.");}else {alert("Please select a file to upload");}});

body {background-color:Black;}
div.upload {background-color:#fff;border: 1px solid #ddd;border-radius:5px;display:inline-block;height: 30px;padding:3px 40px 3px 3px;position:relative;width: auto;}
div.upload:hover {opacity:0.95;}
div.upload input[type="file"] {display: input-block;width: 100%;height: 30px;opacity: 0;cursor:pointer;position:absolute;left:0;}.uploadButton {background-color: #425F9C;border: none;border-radius: 3px;color: #FFF;cursor:pointer;display: inline-block;height: 30px;margin-right:15px;width: auto;padding:0 20px;box-sizing: content-box;}
.fileName {font-family: Arial;font-size:14px;}
.upload + .uploadButton {height:38px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><form action="" method="post" enctype="multipart/form-data"><div class="upload"><input type="button" class="uploadButton" value="Browse" /><input type="file" name="upload" accept="image/*" id="fileUpload" /><span class="fileName">Select file..</span></div><input type="button" class="uploadButton" value="Upload File" /></form>

希望有帮助！！！

本周我还需要自定义按钮并将所选文件名显示在一边，所以在阅读了上面的一些答案后（感谢BTW），我想出了以下实现：

超文本标记语言：

<div class="browse"><label id="uploadBtn" class="custom-file-upload">Choose file<input type="file" name="fileInput" id="fileInput" accept=".yaml" ngf-select ngf-change="onFileSelect($files)" /></label><span>\{\{fileName}}</span></div>

css

   input[type='file'] {color: #a1bbd5;display: none;
}
.custom-file-upload {border: 1px solid #a1bbd5;display: inline-block;padding: 2px 8px;cursor: pointer;}
label{color: #a1bbd5;border-radius: 3px;}

Javascript（Angular）

app.controller('MainCtrl', function($scope) {
$scope.fileName = 'No file chosen';
$scope.onFileSelect = function ($files) {$scope.selectedFile = $files;$scope.fileName = $files[0].name;};});

基本上我正在使用ng-file-上传lib，Angular-wise我将文件名绑定到我的$作用域，并将其初始值为“未选择文件”，我还将onFile选择（）函数绑定到我的作用域，因此当文件被选中时，我使用ng-上传API获取文件名并将其分配给$scope.filename.

如果您使用的是Bootstrap 3，这对我很有用：

见https://www.abeautifulsite.net/posts/whipping-file-inputs-into-shape-with-bootstrap-3/

.btn-file {position: relative;overflow: hidden;}.btn-file input[type=file] {position: absolute;top: 0;right: 0;min-width: 100%;min-height: 100%;font-size: 100px;text-align: right;filter: alpha(opacity=0);opacity: 0;outline: none;background: white;cursor: inherit;display: block;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<span class="btn btn-primary btn-file">Browse...<input type="file"></span>

其产生以下文件输入按钮：

真的，看看https://www.abeautifulsite.net/posts/whipping-file-inputs-into-shape-with-bootstrap-3/

如果有人仍然关心如何在没有JavaScript的情况下做到这一点，让我完成Josh的回答：

如何显示文件名的文本：

最简单的方法是将两个元素都设置为位置：相对，为标签提供更高的z索引并为输入文件提供负边距，直到标签文本位于您想要的位置。不要在输入上使用显示：无！

示例：

input[type="file"] {position:relative;z-index:1;margin-left:-90px;}
.custom-file-upload {border: 1px solid #ccc;display: inline-block;padding: 6px 12px;cursor: pointer;position:relative;z-index:2;background:white;
}

我发现这种方法是最简单和最简单的。

这是一个工作示例：http://codepen.io/c3zar22/pen/QNoYXN

以下是解释：

• 这将是标记：

  <label for="attach-project-file"><span id="remove-project-file" class="close">x</span><div class="filename" id="attached-project-file">Click to select a file</div></label><input id="attach-project-file" type="file">

• hide the input in a hacky way like this:

  #attach-project-file {width: 0.1px;height: 0.1px;opacity: 0;overflow: hidden;position: absolute;z-index: -1;}

• style the corresponding label instead

  [for="attach-project-file"] {/* your styles here */}

• style "remove file" button

  .close {font-size: 16px;padding: 10px;position: absolute;top: 0;right: 0;cursor: pointer;font-style: normal;}

• .filename element will be used to display the selected file

• below is the commented JS code needed (using jQuery) to make it work:

  var $attach = $('#attach-project-file'),$remove = $('#remove-project-file'),$name = $('#attached-project-file');
  // initially hide the remove button$remove.hide();
  // do this when file input has changed// i.e.: a file has been selected$attach.on('change', function() {var val = $(this).val();if (val !== '') {// if value different than empty
  // show the file name as text// hide/text/fadeIn creates a nice effect when changing the text$name.hide().text(val).fadeIn();
  // show the remove button$remove.fadeIn();} else {// if value empty, means the file has been removed
  // show the default text$name.hide().text('Click to select a file').fadeIn();
  // hide remove button$remove.fadeOut();}});
  // remove selected file when clicking the remove button// prevent click bubbling to the parent label and triggering file selection$remove.on('click', function(e) {e.preventDefault();e.stopPropagation();
  $attach.val('').change(); // trigger change event});

只有CSS

使用这个非常简单和容易

.choose::-webkit-file-upload-button {color: white;display: inline-block;background: #1CB6E0;border: none;padding: 7px 15px;font-weight: 700;border-radius: 3px;white-space: nowrap;cursor: pointer;font-size: 10pt;}

<label>Attach your screenshort</label><input type="file" multiple class="choose">

可见性：隐藏的技巧

我通常选择visibility:hidden的把戏

这是我的纽扣

<div id="uploadbutton" class="btn btn-success btn-block">Upload</div>

这是输入type=file按钮。注意visibility:hidden规则

<input type="file" id="upload" style="visibility:hidden;">

这是将它们粘合在一起的JavaScript位。它有效

<script>$('#uploadbutton').click(function(){$('input[type=file]').click();});</script>

我可以使用下面的代码使用纯CSS来做到这一点。我使用了引导和字体很棒。

<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;"></label>

这些答案很好，它们都适用于非常具体的用例。也就是说，他们是固执己见的。

所以，这是一个没有任何假设的答案，但无论你如何修改它都有效。您可以使用css更改设计，添加javascript以可能在更改时显示文件名等。

代码：

这里是核心css

.file-input{pointer-events: none;position: relative;overflow: hidden;}.file-input > * {pointer-events: none;}.file-input > input[type="file"]{position: absolute;top: 0;right: 0;bottom: 0;left: 0;opacity: 0;pointer-events: all;cursor: pointer;height: 100%;width: 100%;}

和核心html：

<div class="file-input"><input type="file"/></div>

正如你所看到的，我们正在强制任何指针事件（单击）发生在. file-输入元素上，或者它的任何子元素，都被代理到文件输入。这是因为文件输入是绝对定位的，并且总是会消耗容器的宽度/高度。因此，您可以自定义以满足您的需求。将包装器设置为按钮的样式，使用一些js在选择上显示文件名，等等。只要上述核心代码保持不变，什么都不会中断。

正如您将在演示中看到的，我添加了一个带有文本“选择文件”的span和一个带有额外样式的类来为.file-input div设置样式。这应该是任何打算创建自定义文件上传元素的人的规范起点。

演示：JSFIDDLE

也许有很多awnser。但我喜欢纯CSS中带有fa按钮的：

.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/

一种快速而粗略的方法是将标签设置为按钮并将位置设置为绝对，以便它漂浮在原始按钮上，您仍然可以看到文件名。不过，我正在考虑移动解决方案。

使用本地拖放支持的工作示例：https://jsfiddle.net/j40xvkb3/

设置文件输入样式时，您不应该破坏任何本机交互输入提供。

display: none方法破坏了原生拖放支持。

为了不破坏任何东西，您应该对输入使用opacity: 0方法，并在包装器中使用相对/绝对模式对其进行定位。

使用这种技术，您可以轻松地为用户设置单击/删除区域的样式，并在dragenter事件的javascript中添加自定义类以更新样式并为用户提供反馈，让他看到他可以删除文件。

超文本标记语言：

<label for="test"><div>Click or drop something here</div><input type="file" id="test"></label>

css：

input[type="file"] {position: absolute;left: 0;opacity: 0;top: 0;bottom: 0;width: 100%;}
div {position: absolute;left: 0;top: 0;bottom: 0;width: 100%;display: flex;align-items: center;justify-content: center;background: #ccc;border: 3px dotted #bebebe;border-radius: 10px;}
label {display: inline-block;position: relative;height: 100px;width: 400px;}

这是一个工作示例（使用额外的JS来处理dragover事件和丢弃的文件）。

https://jsfiddle.net/j40xvkb3/

希望这有帮助！

将上传文件按钮放在漂亮的按钮或元素上并隐藏它。

非常简单，适用于任何浏览器

<div class="upload-wrap"><button type="button" class="nice-button">upload_file</button><input type="file" name="file" class="upload-btn"></div>

样式

.upload-wrap {position: relative;}
.upload-btn {position: absolute;left: 0;opacity: 0;}

不要被“伟大的”仅限CSS的解决方案所愚弄，这些解决方案实际上非常特定于浏览器，或者将样式按钮覆盖在真实按钮之上，或者强迫您使用<label>而不是<button>，或者任何其他类似的黑客行为。JavaScript是使其正常使用所必需的。如果您不相信我，请研究gmail和DropZone是如何做到的。

只需按照您的意愿设计一个普通按钮，然后调用一个简单的JS函数来创建隐藏的输入元素并将其链接到您的样式按钮。

<!DOCTYPE html><meta charset="utf-8">
<style>button {width            : 160px;height           : 30px;font-size        : 13px;border           : none;text-align       : center;background-color : #444;color            : #6f0;}button:active {background-color : #779;}</style>
<button id="upload">Styled upload button!</button>
<script>
function Upload_On_Click(id, handler) {var hidden_input = null;document.getElementById(id).onclick = function() {hidden_input.click();}function setup_hidden_input() {hidden_input && hidden_input.parentNode.removeChild(hidden_input);hidden_input = document.createElement("input");hidden_input.setAttribute("type", "file");hidden_input.style.visibility = "hidden";document.querySelector("body").appendChild(hidden_input);hidden_input.onchange = function() {handler(hidden_input.files[0]);setup_hidden_input();};}setup_hidden_input();}
Upload_On_Click("upload", function(file) {console.log("GOT FILE: " + file.name);});
</script>

请注意上面的代码是如何在用户每次选择文件后重新链接它的。这很重要，因为“onchange”仅在用户更改文件名时调用。但您可能希望在用户每次提供文件时获取文件。

这是使用材质/角度文件上传的好方法。你可以用引导按钮做同样的事情。

注意我使用<a>而不是<button>，这允许单击事件冒泡。

<label><input type="file" (change)="setFile($event)" style="display:none" />
<a mat-raised-button color="primary"><mat-icon>file_upload</mat-icon>Upload Document</a>
</label>

在这里，我们使用跨度来触发类型file和我们只是定制了那个跨度的输入，因此我们可以使用这种方式添加任何样式。

说明，我们使用带有可见性的输入标签：隐藏选项并在跨度中触发它。

.attachFileSpan{color:#2b6dad;cursor:pointer;}.attachFileSpan:hover{text-decoration: underline;}

<h3> Customized input of type file </h3><input id="myInput" type="file" style="visibility:hidden"/>
<span title="attach file" class="attachFileSpan" onclick="document.getElementById('myInput').click()">Attach file</span>

参考

当单击样式<div>时，只需使用trigger()函数模拟单击<input>。我从<div>中创建了自己的按钮，然后在单击我的<div>时触发了对input的单击。这允许您随心所欲地创建按钮，因为它是<div>并模拟单击文件<input>。然后在您的<input>上使用display: none。

// div styled as my load file button<div id="simClick">Load from backup</div>
<input type="file" id="readFile" />
// Click function for input$("#readFile").click(function() {readFile();});
// Simulate click on the input when clicking div$("#simClick").click(function() {$("#readFile").trigger("click");});

我发现的最好的方法是有一个input type: file，然后将其设置为display: none。给它一个id。创建一个按钮或任何其他要打开文件输入的元素。

然后在其上添加一个事件侦听器（按钮），单击时模拟单击原始文件输入。就像点击一个名为hello的按钮，但它会打开一个文件窗口。

示例代码

//i am using semantic ui
<button class="ui circular icon button purple send-button" id="send-btn"><i class="paper plane icon"></i></button><input type="file" id="file" class="input-file" />

javascript

var attachButton=document.querySelector('.attach-button');attachButton.addEventListener('click', e=>{$('#file').trigger("click")})

转换文件名的多文件解决方案

Bootstrap示例

超文本标记语言：

<div><label class="btn btn-primary search-file-btn"><input name="file1" type="file" style="display:None;"> <span>Choose file</span></label><span>No file selected</span></div>
<div><label class="btn btn-primary search-file-btn"><input name="file2" type="file" style="display:None;"> <span>Choose file</span></label><span>No file selected</span></div>

1.带有jQuery的JS：

$().ready(function($){$('.search-file-btn').children("input").bind('change', function() {var fileName = '';fileName = $(this).val().split("\\").slice(-1)[0];$(this).parent().next("span").html(fileName);})});

2.没有jQuery的JS

Array.prototype.forEach.call(document.getElementsByTagName('input'), function(item) {item.addEventListener("change", function() {var fileName = '';fileName = this.value.split("\\").slice(-1)[0];this.parentNode.nextElementSibling.innerHTML = fileName;});});

这种方法为您提供了整个灵活性！ES6/VanillaJS！

html：

<input type="file" style="display:none;"></input><button>Upload file</button>

javascript：

document.querySelector('button').addEventListener('click', () => {document.querySelector('input[type="file"]').click();});

这隐藏了输入文件按钮，但在引擎盖下从另一个普通按钮单击它，您显然可以像任何其他按钮一样设置样式。这是除了无用的DOM节点之外没有缺点的唯一解决方案。由于display:none;，输入按钮不会在DOM中保留任何可见空间。

（我已经不知道该给谁提供支持了。但是我从Stackoverflow上的某个地方得到了这个想法。）

这是一个纯CSS、无Javascript、无Bootstrap、100%跨浏览器的解决方案！只需剪切粘贴块样式，然后测试您的文件上传控件。

这个解决方案不会像这里的其他帖子一样隐藏然后重新创建原始的超文本标记语言元素。它使用纯CSS而没有任何马戏团技巧或第三方工具来设计所有主要浏览器的原始文件上传表单控件。您甚至不需要更改您的超文本标记语言代码！只需将下面的代码剪切粘贴到您的网页中即可测试它…

<style>/* Note: This CSS will style all instances of<input type=file /> controls in your website. */input[type="file"],input[type="file"]:visited,input[type="file"]:hover,input[type="file"]:focus,input[type="file"]:active {margin:0;padding: 0em 0em;/* fallback: older browsers like IE 1-8 need "em" */padding: 0rem 0rem;/* older browsers dont know what "rem" is */overflow: hidden; /* long file names overflow so just hide the end */background: #fff;border-radius: .2em;border-radius: .2rem;outline: none;border: 2px solid #bbb;cursor: pointer;-webkit-appearance: textfield;-moz-appearance: textfield;}
input[type="file"]:hover {background: #f9f9ff; /* Optional rollover color: I am using a light blue to indicate an interaction */border: 2px solid #999;}
input[type="file"]:visited,input[type="file"]:focus,input[type="file"]:active {background: #fff; /* Default back to white when focused. */border: 2px solid #999;}
/* Note: These "disabled" selectors blow up in IE so have to be separated from the same styles above. */input[type="file"]:disabled {margin: 0;padding: 0em 0em;padding: 0rem 0rem;overflow: hidden; /* long file names overflow so just hide the end */background: #ddd;border-radius: .2em;border-radius: .2rem;outline: none;border: 2px solid #bbb;cursor: pointer;-webkit-appearance: textfield;-moz-appearance: textfield;}
input[type="file"]:disabled:hover {background: #ddd; /* disabled-readonly buttons should be grey */border: 2px solid #999;}
input[type="file"]:disabled:visited,input[type="file"]:disabled:focus,input[type="file"]:disabled:active {background: #ddd; /* disabled-readonly buttons should be grey */border: 2px solid #999;}
/* IE UPLOAD BUTTON STYLE: This attempts to alter the file upload button style in IE.  Keep in mind IE gives you limited design control but at least you can customize its upload button.*/::-ms-browse { /* IE */display: inline-block;margin: 0;padding: .2em .5em;padding: .2rem .5rem;text-align: center;outline: none;border: none;background: #fff;white-space: nowrap;cursor: pointer;}/* FIREFOX UPLOAD BUTTON STYLE */::file-selector-button {/* firefox */display: inline-block;margin: 0rem 1rem 0rem 0rem;padding: .18em .5em;padding: .18rem .5rem;-webkit-appearance: button;text-align: center;border-radius: .1rem 0rem 0rem .1rem;outline: none;border: none;border-right: 2px solid #bbb;background: #eee;white-space: nowrap;cursor: pointer;}/* CHROME AND EDGE UPLOAD BUTTON STYLE */::-webkit-file-upload-button { /* chrome and edge */display: inline-block;margin: 0rem 1rem 0rem 0rem;padding: .19em .5em;padding: .19rem .5rem;-webkit-appearance: button;text-align: center;border-radius: .1rem 0rem 0rem .1rem;outline: none;border: none;border-right: 2px solid #bbb;background: #eee;white-space: nowrap;cursor: pointer;}</style>
<input type="file" id="fileupload" name="fileupload"value="" tabindex="0" enctype="multipart/form-data"accept="image/*" autocomplete="off" multiple="multiple"aria-multiselectable="true" title="Multiple File Upload"aria-label="Multiple File Upload" />
<br /><br />
<input disabled="disabled" type="file" id="fileupload"name="fileupload" value="" tabindex="0"enctype="multipart/form-data" accept="image/*"autocomplete="off" multiple="multiple"aria-multiselectable="true" title="Disabled Multiple File Upload"aria-label="Disabled Multiple File Upload" />

这是使用下面的CSS在Firefox、Chrome和Edge中文件上传控件的外观。这是一个非常简单的干净设计。您可以将其更改为任何您喜欢的外观：

Internet Explorer为您提供了有限的设计控制，但至少您可以使用CSS操作控件以更改一些内容，包括圆形边框和颜色：

我的解决方案的优点是：

1. 您坚持使用简单的CSS来设置原始超文本标记语言输入控件的样式
2. 您可以在文件输入文本框中看到一个或多个文件名
3. 屏幕阅读器和ARIA友好型设备可以与您的文件上传控件正常交互
4. 您可以在超文本标记语言元素上设置tabindex，使其成为制表符顺序的一部分
5. 因为你使用纯超文本标记语言和CSS，你的文件输入按钮在新旧浏览器中完美运行
6. 需要零JavaScript！
7. 即使在最古老的浏览器中也能快速运行和加载照明
8. 因为您没有使用“显示：无”来隐藏控件，所以它的文件块流数据永远不会以任何已知的旧版本或新浏览器版本到达服务器

您不需要高飞 JavaScript技巧，Bootstrap或尝试隐藏/重新创建您的文件输入控件。这只会破坏每个人在线的可用性。样式化原始超文本标记语言控件意味着您的文件上传控件保证在25年的网络浏览器中运行良好，无论新旧。

这就是为什么你不能相信所有这些脚本黑客只是为了尝试重建一些视觉体验而擦除、重写或销毁超文本标记语言。这表明你不明白超文本标记语言是如何使用的，或者为什么它已经存在了30年几乎没有变化。你永远不应该尝试重写超文本标记语言的原生表单控制功能。为什么？在网站中使用自然超文本标记语言不仅仅是为了一些强迫的视觉体验而操纵标记。在这些被取代的超文本标记语言元素中，有限的视觉构图排版的权衡是有原因的。

我的建议：坚持使用简单的超文本标记语言和CSS解决方案，作为Web开发人员，您将没有任何问题。

适用于大多数后端的图像上传应用程序演示，具有漂亮的动画功能。

// commonfunction render_element(styles, el) {for (const [kk, vv] of Object.entries(styles)) {el.style[kk] = vv;}}
function hoverOpacity(el) {el.addEventListener('mouseenter', function() {el.style.opacity = 0.75}.bind(el));el.addEventListener('mouseleave', function() {el.style.opacity = 1}.bind(el));}
// return void event handler on setTimeoutfunction buffer(func, time){return e=>{if(func.still)return;// first runtimeif(!func.pft){func(e);func.pft = true;func.still = false;return;}func.still = true;setTimeout(e=>{func(e);func.still = false;}, time);}}// end of common
const imageUploadButton = document.getElementById('image-upload-button');imageUploadButton.addEventListener('click', e=>{// pulse animation total timeconst d1 = document.getElementById('image-form');let time = 600;
if(d1.rendered){d1.ready();}else{d1.ready = function(){d1.style.display = 'flex';d1.style.background = '#c5edd0';this.d2.style.background = '#b4dbbf';this.d3.style.background = '#95dea9';this.d4.innerHTML = 'Drag and Drop or Click Above to Upload';}let dismiss_btn = document.createElement('div');render_element({position: 'absolute',height: '30px',width: '30px',top: '0',right: '0',background: '#fff',borderRadius: '30px',cursor: 'pointer',margin: '2px',zIndex: '10',}, dismiss_btn);dismiss_btn.addEventListener('mouseenter', function(){this.style.background = '#fc4f30'});dismiss_btn.addEventListener('mouseleave', function(){this.style.background = '#fff'});dismiss_btn.addEventListener('click', ()=>{d1.style.display = 'none'});d1.appendChild(dismiss_btn);const d3 = d1.querySelector('#image-input');const d5 = d1.querySelector('#image-submit');d5.style.visibility = 'hidden';d1.parentNode.removeChild(d1);document.body.appendChild(d1);d1.removeChild(d3);let [d2,d4,] = Array.from({length: 3}, ()=>document.createElement('div'));let width = window.innerWidth;let d_styles = {display: 'flex',justifyContent: 'center',alignItems: 'center',};render_element({position: 'fixed',left: ((width - 430) / 2).toString() + 'px',width: '430px',top: '60px',height: '280px',zIndex: '10',}, d1);render_element(d_styles, d1);
render_element({width: '90%',height: '90%',}, d2);render_element(d_styles, d2);
render_element({width: '80%',height: '70%',fontSize: '0',cursor: 'pointer',}, d3);hoverOpacity(d3);render_element(d_styles, d3);
d1.appendChild(d2);d2.appendChild(d3);
let tt = time / 3;let ht = tt / 2;d1.addEventListener('dragover', buffer(e=>{d1.style.background = '#ebf9f0';setTimeout(()=>{d1.style.background = '#95dea9';}, ht);setTimeout(()=>{d2.style.background = '#b6e3c2';setTimeout(()=>{d2.style.background = '#c4eed2';}, ht);}, tt);setTimeout(()=>{d3.style.background = '#cae3d1';setTimeout(()=>{d3.style.background = '#9ce2b4';}, ht);}, tt);}, time));
d2.style.flexDirection = 'column';render_element({fontSize: '16px',textAlign: 'center',fontFamily: 'Verdana',}, d4);d2.appendChild(d4);
d3.addEventListener('change', e=>{// backend// d5.click();// if backend succeed, run frontendsetTimeout(()=>{d1.style.background = '#dbcea2';setTimeout(()=>{d2.style.background = '#dbc169';setTimeout(()=>{d3.style.background = '#ebc034';}, ht);}, tt);}, time);// display backend path here// now only display filenamed4.innerHTML = d3.files[0].name;});d1.d2 = d2;d1.d3 = d3;d1.d4 = d4;d1.ready();d1.rendered = true;}});

#image-upload-button{width: 200px;height: 40px;background: lightgrey;display: flex;align-items: center;justify-content: center;cursor: pointer;}
#image-form{display: none;}
::-webkit-file-upload-button {visibility: hidden;}

<div id="image-upload-button">Upload Image<form id="image-form" action="post"><input id="image-input" type="file" /><button id="image-submit" type="submit"></button></form></div>

您可以将一个很棒的（未完成的）文件上传到<button>元素或任何其他元素：

function selectFile() {document.getElementById("fileSelector").click();}

input#fileSelector[type="file"] {display: none;}
button[onclick*="()"] {cursor: pointer;}

<input type="file" id="fileSelector"><button onclick="selectFile()">Select file from computer...</button>

::file-selector-button

https://developer.mozilla.org/en-US/docs/Web/CSS/::file-selector按钮

这是一个新的选择器，可用于设置文件选择器按钮的样式。

它完全支持最新的浏览器版本。

input[type=file]::file-selector-button {border: 2px solid #6c5ce7;padding: .2em .4em;border-radius: .2em;background-color: #a29bfe;transition: 1s;}
input[type=file]::file-selector-button:hover {background-color: #81ecec;border: 2px solid #00cec9;}

<form><label for="fileUpload">Upload file</label><input type="file" id="fileUpload"></form>

这是另一个演示不同样式的片段：

.input_container {border: 1px solid #e5e5e5;}
input[type=file]::file-selector-button {background-color: #fff;color: #000;border: 0px;border-right: 1px solid #e5e5e5;padding: 10px 15px;margin-right: 20px;transition: .5s;}
input[type=file]::file-selector-button:hover {background-color: #eee;border: 0px;border-right: 1px solid #e5e5e5;}

<form><div class="input_container"><input type="file" id="fileUpload"></div></form>

我觉得这个答案是必要的，因为这里的大多数答案都已经过时了。