您如何设置输入type="file"按钮的样式？
设置输入类型=“文件”按钮的样式
这是一个简单的css only解决方案，它创建一致的目标区域，并让您按自己的喜好设置人造元素的样式。
基本思想是这样的：
- 有两个“假”元素（文本输入/链接）作为真实文件输入的同级元素。绝对放置它们，使它们恰好在目标区域的顶部。
- 用div包裹文件输入。将溢出设置为隐藏（这样文件输入不会溢出），并使其大小恰好等于您希望目标区域的大小。
- 将文件输入的不透明度设置为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>
我发现了一种非常简单的方法将文件按钮切换为图片。您只需标记图片并将其放在文件按钮的顶部即可。
<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>
单击带标签的图像时，选择文件按钮。
不要被“伟大的”纯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>
这是一个解决方案，还显示了所选的文件名：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; }
仅CSS
使用这个非常简单和EASY
HTML：
<label>Attach your screenshort</label>
<input type="file" multiple class="choose">
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;
}
我能想到的唯一方法是在渲染按钮后使用javascript查找按钮并为其指定样式
您可能还会看一下这篇文章
将上传文件按钮放在漂亮的按钮或元素上，然后将其隐藏。
非常简单，可以在任何浏览器上使用
<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;
}
<label>
<input type="file" />
</label>
您可以将输入type =“ file”包装在输入标签中。根据需要设置标签样式，并使用display隐藏输入内容：none;
带有本地拖放支持的工作示例：https : //jsfiddle.net/j40xvkb3/
在设置文件输入样式时，您不应破坏输入提供的任何本机交互。
该display: none方法破坏了本机拖放支持。
为了不破坏任何内容，您应该使用opacity: 0输入法，并在包装器中使用相对/绝对模式放置它。
使用此技术，您可以轻松为用户的单击/放置区域设置样式，并在dragenter事件中的javascript中添加自定义类以更新样式并向用户提供反馈，以使用户看到可以删除文件。
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/
希望这对您有所帮助！
<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规则，因此“三叉戟”示例也将在此处工作：
::-webkit-file-upload-button {
background: black;
color: red;
padding: 1em;
}<input type="file">在OS X的Chrome 26中显示如下：
我可以使用以下代码使用纯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>如果您使用的是Bootstrap 3，则对我有用：
参见http://www.abeautifulsite.net/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>产生以下文件输入按钮：
认真查看http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/
最好的方法是使用伪元素：after或：before作为隐藏在de输入上的元素。然后根据需要设置该伪元素的样式。我建议您对所有输入文件使用通用样式，如下所示：