如何设置输入 type="file" 按钮的样式？
<input type="file" />【问题讨论】：
input type="submit">。我对两种输入类型应用了相同的样式，这就是我得到的：i.imgur.com/7MI1Poh.jpg
See this example! - 适用于 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"/>
作为替代方案，您也可以直接用标签包装文件输入元素：(example)
<label class="custom-file-upload">
<input type="file"/>
Custom Upload
</label>
在样式方面，只需隐藏1使用attribute selector的输入元素。
input[type="file"] {
display: none;
}
那么您需要做的就是设置自定义label 元素的样式。 (example).
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
1 - 值得注意的是，如果你使用display: none 隐藏元素，它在IE8 及更低版本中将不起作用。还要注意 jQuery 默认验证 doesn't validate hidden fields 的事实。如果其中任何一个对您来说是个问题，这里有两种不同的方法可以隐藏在这些情况下有效的输入（1、2）。
【讨论】：
display: none设置为input[type=file]，如何显示所选文件的名称？
position: absolute; left: -99999rem 而不是display: none。大多数情况下，如果使用 display: none 方法隐藏元素，屏幕阅读器将不会读取它们。
label 元素不能通过键盘访问，这与 buttons 和 inputs 不同。添加tabindex 不是解决方案，因为当label 获得焦点并且用户按下回车键时，它仍然不会被执行。我通过视觉上隐藏输入解决了这个问题，所以它仍然可以集中，然后在label父级上使用:focus-within：jsbin.com/fokexoc/2/edit?html,css,output
样式文件输入是出了名的困难，因为大多数浏览器不会改变 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
【讨论】：
按照这些步骤，您可以为您的文件上传表单创建自定义样式：
这是简单的 HTML 表单（请阅读我在下面写的 HTML cmets）
<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>
然后使用这个简单的脚本将点击事件传递给文件输入标签。
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>【讨论】：
创建<input type="file"> 时，所有渲染引擎都会自动生成一个按钮。从历史上看，该按钮完全没有样式。但是，Trident 和 WebKit 通过伪元素添加了钩子。
三叉戟
从 IE10 开始，文件输入按钮可以使用 ::-ms-browse 伪元素设置样式。基本上，您应用于常规按钮的任何 CSS 规则都可以应用于伪元素。例如：
::-ms-browse {
background: black;
color: red;
padding: 1em;
}<input type="file">在 Windows 8 的 IE10 中显示如下：
WebKit
WebKit 为其文件输入按钮提供了一个带有::-webkit-file-upload-button 伪元素的钩子。同样，几乎可以应用任何 CSS 规则，因此 Trident 示例也可以在这里使用：
::-webkit-file-upload-button {
background: black;
color: red;
padding: 1em;
}<input type="file">这在 OS X 上的 Chrome 26 中显示如下：
【讨论】：
用 css 隐藏它并使用带有 $(selector).click() 的自定义按钮来激活浏览按钮。然后设置一个时间间隔来检查文件输入类型的值。间隔可以为用户显示值，以便用户可以看到上传的内容。提交表单时间隔将清除[编辑]对不起，我一直很忙是想更新这篇文章，这里是一个例子
<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;
});
});
【讨论】：
$('.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
【讨论】：
如果您使用的是 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/
【讨论】：
在设置文件输入样式时，您不应破坏任何原生交互 输入提供。
display: none 方法打破了原生拖放支持。
为了不破坏任何东西，您应该使用opacity: 0 方法作为输入，并在包装器中使用相对/绝对模式定位它。
使用这种技术，您可以轻松地为用户设置点击/拖放区域的样式，并在 dragenter 事件中添加自定义类以更新样式并给用户反馈，让他看到他可以拖放文件。
HTML：
<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/
希望这有帮助！
【讨论】：
只有 CSS
使用这个非常simple和EASY
.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">【讨论】：
<label>
<input type="file" />
</label>
您可以将输入 type="file" 包装在输入标签内。随意设置标签的样式，并使用 display: none; 隐藏输入；
【讨论】：
我可以用 pure 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;">
</label>【讨论】：
这种方法为您提供了整个灵活性！ 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 上的某个地方得到这个想法的。）
【讨论】：
这是一个解决方案，它并没有真正设置<input type="file" /> 元素的样式，而是在其他元素之上使用<input type="file" /> 元素（可以设置样式）。 <input type="file" /> 元素并不真正可见，因此整体错觉是一个样式精美的文件上传控件。
我最近遇到了这个问题，尽管 Stack Overflow 上有很多答案，但似乎没有一个真正符合要求。最后，我最终定制了这个，以获得一个简单而优雅的解决方案。
我还在 Firefox、IE（11、10 和 9）、Chrome 和 Opera、iPad 和一些安卓设备上进行了测试。
这是 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>希望对你有帮助！！！
【讨论】：
非常简单，适用于任何浏览器
<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;
}
【讨论】：
使用 jquery 很简单。给出Ryan的建议稍作修改的代码示例。
基本的html：
<div id="image_icon"></div>
<div id="filename"></div>
<input id="the_real_file_input" name="foobar" type="file">
准备好后，请务必在输入中设置样式：opacity: 0
你不能设置display: none，因为它需要是可点击的。但是，如果您愿意，可以将其放在“新建”按钮下，或者使用 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() 解析为更有意义的内容，但您应该已准备就绪。
【讨论】：
这是一个纯 CSS、无 Javascript、无引导、100% 跨浏览器的解决方案！只需剪切和粘贴一组样式，然后测试您的文件上传控件。
此解决方案不会像这里的其他帖子那样尝试隐藏然后重新创建原始 HTML 元素。它使用plain CSS 没有任何马戏团技巧或第三方工具来为所有主要浏览器设置原始文件上传表单控件的样式。您甚至不需要更改 HTML 代码！
这是使用下面的 CSS 在 Firefox、Chrome 和 Edge 中文件上传控件的外观。这是一个非常简单干净的设计。您可以将其更改为您喜欢的任何外观：
Internet Explorer 为您提供了有限的设计控制，但至少您可以使用 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;
padding: 0rem 0rem;
overflow: hidden; /* long file names overflow so just hide the end */
background: #ffffff;
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; /* 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: Firefox flags the file name box as a *readonly* input. So that attribute selector was added below. Note: These selectors blow up in IE so have to be separated from the same styles above. */
input[type="file"]:disabled,
input[type="file"]:read-only {
margin: 0;
padding: 0em 0em;
padding: 0rem 0rem;
overflow: hidden; /* long file names overflow so just hide the end */
background: #ffffff;
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,
input[type="file"]:read-only:hover {
background: #f9f9ff; /* I am using a light blue to indicate an interaction */
border: 2px solid #999;
}
input[type="file"]:disabled:visited,
input[type="file"]:disabled:focus,
input[type="file"]:disabled:active,
input[type="file"]:read-only:visited,
input[type="file"]:read-only:focus,
input[type="file"]:read-only:active {
background: #fff; /* Default back to white when focused. */
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>
我的解决方案的优点是：
tabindex，使其成为 Tab 键顺序的一部分您不需要 goofy JavaScript 技巧、Bootstrap 或尝试隐藏/重新创建文件输入控件。这只会破坏在线每个人的可用性。为原始 HTML 控件设置样式意味着您的文件上传控件保证在 25 年的新旧网络浏览器中都能正常工作。
这就是为什么您不能相信所有这些脚本化的黑客攻击，它们会擦除、重写或破坏 HTML，只是为了尝试重新创造一些视觉体验。这表明您不了解 HTML 是如何使用的，或者为什么它存在 30 年几乎没有变化。您永远不应该尝试重写 HTML 的原生表单控制功能。为什么？在网站中使用自然 HTML 不仅仅是为了一些强制的视觉体验而操纵标记。这些被替换的 HTML 元素中有限的视觉设计的权衡是出于某种原因而设计的。
我的建议：坚持使用简单的 HTML 和 CSS 解决方案，作为 Web 开发人员，您将遇到零问题。
【讨论】：
pointer-events: none; 的单独元素。
我能想到的唯一方法是在渲染后使用 javascript 找到按钮并为其分配样式
你也可以看看this writeup
【讨论】：
<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>
【讨论】：
click() 方法来触发输入类型文件的事件。大多数浏览器出于安全原因不允许。
我通常选择visibility:hidden 技巧
这是我的风格按钮
<div id="uploadbutton" class="btn btn-success btn-block">Upload</div>
这是输入类型=文件按钮。注意visibility:hidden 规则
<input type="file" id="upload" style="visibility:hidden;">
这是将它们粘合在一起的 JavaScript 位。有效
<script>
$('#uploadbutton').click(function(){
$('input[type=file]').click();
});
</script>
【讨论】：
style="visibility:hidden" 太长，直接用hidden。此外，click() 确实适用于任何浏览器，目前还没有非常可靠的安全理由，在任何设备上都是合法的方式，@Gianluca 用于经典 jQuery 使用 trigger()
引导EXAMPLE
<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>
$().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);
})
});
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;
});
});
【讨论】：
这里我们使用 span 来触发类型文件的输入，我们只是自定义了 span，所以我们可以使用这种方式添加任何样式。
注意，我们使用带有 visibility:hidden 选项的 input 标签并在 span 中触发它。
.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>【讨论】：
这是一个解决方案，它还显示了选择的文件名： http://jsfiddle.net/raft9pg0/1/
HTML：
<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; }
【讨论】：
fakepath路径？
这是上传材料/角度文件的好方法。 您可以使用引导按钮执行相同的操作。
请注意，我使用<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>
【讨论】：
也许有很多遮阳篷。但我喜欢这个带有 fa-buttons 的纯 CSS：
.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"/>【讨论】：
不要被“伟大的”纯 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”。但您可能希望每次用户提供文件时都获取该文件。
【讨论】：
label 方法确实有效，只是它不能显示选定的文件名或路径。所以必然地说，这是唯一需要 JS 解决的问题。
更新 没关系，这在 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>
尽情享受吧！
旧更新
把它变成了一个 Stylus mixin。对于你们中的一个很酷的 SCSS 猫来说应该很容易转换它。
file-button(button_width = 150px)
display block
position relative
margin auto
cursor pointer
border 0
height 0
width 0
outline none
&:after
position absolute
top 0
text-align center
display block
width button_width
left -(button_width / 2)
用法：
<input type="file">
input[type="file"]
file-button(200px)
【讨论】：
我找到了一种将文件按钮切换为图片的非常简单的方法。 您只需标记一张图片并将其放在文件按钮的顶部。
<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>
点击带标签的图片时，选择文件按钮。
【讨论】：
本周我还需要自定义按钮并将所选文件名显示在旁边，所以在阅读了上面的一些答案（谢谢顺便说一句）后，我想出了以下实现：
HTML：
<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（角度）
app.controller('MainCtrl', function($scope) {
$scope.fileName = 'No file chosen';
$scope.onFileSelect = function ($files) {
$scope.selectedFile = $files;
$scope.fileName = $files[0].name;
};
});
基本上我正在使用 ng-file-upload lib，Angular-wise 我将文件名绑定到我的 $scope 并赋予它“未选择文件”的初始值，我还绑定了 onFileSelect( ) 函数到我的范围，所以当一个文件被选中时，我使用 ng-upload API 获取文件名并将其分配给 $scope.filename。
【讨论】：
在单击样式化的<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");
});
【讨论】：
最好的方法是使用伪元素 :after 或 :before 作为在 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;
}
【讨论】：