HTML

Question

如何设置输入type="file"按钮的样式。

Answer 1

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

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>

在样式方面，只需使用attribute selector隐藏¹输入元素。

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

然后，您需要做的就是设置自定义label元素的样式。 (example)

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

¹ - 值得注意的是，如果使用display: none隐藏元素，它将无法在IE8及以下版本中使用。还要注意jQuery默认验证doesn't validate hidden fields这一事实。如果这些问题中的任何一个对您来说都是一个问题，则可以使用两种不同的方法来隐藏在这些情况下有效的输入（1，2）。

Answer 2

样式文件输入非常困难，因为大多数浏览器都不会改变CSS或javascript的外观。

即使输入的大小也不会响应以下内容：

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

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

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

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

Answer 3

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

1。）这是简单的HTML表单（请阅读我在下面写的HTML评论）

<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.）然后使用这个简单的脚本将click事件传递给文件输入标记。

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

现在您可以使用任何类型的样式而无需担心如何更改默认样式。我非常了解这一点，因为我一直试图将默认样式更改为一个半月。相信我，这很难，因为不同的浏览器有不同的上传输入标签。所以使用这个来构建自定义文件上载表单。这是完整的AUTOMATED UPLOAD代码。

<html>
<head>
<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">
 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();
  }
</script>
</head>
<body>
<center>
<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>
</center>
</body>
</html>

Answer 4

使用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;
    });
});

Answer 5

HTML

<div class="new_Btn">SelectPicture</div><br>
<input id="html_btn" type='file'" /><br>

CSS

.new_Btn {
// your css propterties
}

#html_btn {
 display:none;
}

的jQuery

$('.new_Btn').bind("click" , function () {
        $('#html_btn').click();
    });
//edit: 6/20/2014: Be sure to use ".on" not ".bind" for newer versions of jQuery

小提琴：http://jsfiddle.net/M7BXC/

如果没有使用普通JavaScript的jQuery，您也可以实现目标。

现在newBtn与html_btn链接，您可以按照自己的喜好设置新btn的样式：D

Answer 6

创建<input type="file">时，所有渲染引擎都会自动生成一个按钮。从历史上看，该按钮完全不具有风格。但是，Trident和WebKit通过伪元素添加了钩子。

<强>三叉戟

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

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

<input type="file">

在Windows 8的IE10中显示如下：

This displays as follows in IE10 on Windows 8:

<强>的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中显示如下：

This displays as follows in Chrome 26 on OS X:

Answer 7

我可以使用下面的代码使用纯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>

Answer 8

如果您使用的是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/

Answer 9

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

您可以将输入类型=“文件”包装在输入的标签内。根据您的喜好设置标签样式，并使用display：none;

隐藏输入

Answer 10

此处的工作示例包含本机拖放支持：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/

希望这有帮助！

Answer 11

使用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();

Tah dah！你可能需要将val（）解析为更有意义的东西，但你应该全部设置。

Answer 12

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

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

我还在Firefox，IE（11,10和9），Chrome和Opera，iPad以及一些Android设备上测试了这个。

这里是JSFiddle链接 - ＆gt; http://jsfiddle.net/umhva747/

＆＃13;

$('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");
    }
});

＆＃13;

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;
}

＆＃13;

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

＆＃13;

希望这有帮助!!!

Answer 13

可见性：隐藏TRICK

我通常会选择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>

Answer 14

此方法可为您提供整体灵活性！ 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上的某个地方得到了这个主意。）

Answer 15

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

Answer 16

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

您也可以查看this writeup

Answer 17

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

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

<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;
}

Answer 18

具有已转换文件名的多个文件解决方案

引导程序 EXAMPLE

HTML：

<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;
  });
});

Answer 19

也许有很多笨蛋。但是我喜欢用带有fa-buttons的纯CSS：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

Answer 20

这里我们使用span来触发类型文件的输入，我们只是自定义跨度，因此我们可以使用这种方式添加任何样式。

注意我们使用带有visibility：hidden选项的输入标记并在范围内触发它。

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

Reference

Answer 21

这是一个纯 CSS 跨浏览器解决方案！它是无 Javascript 的！这个也不会像这里的其他帖子一样尝试隐藏然后重新创建原始控件。它使用 plain CSS 而没有任何马戏团技巧来为所有主要浏览器设置原始文件上传表单控件的样式。

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

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>

注意：您可以在旧版本的 Firefox、Chrome、Edge 和 IE 中对其进行测试。

Answer 22

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

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（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-upload lib，Angular-wise我将文件名绑定到我的$ scope并给它初始值'No file chosen'，我也绑定了onFileSelect（）函数到我的范围，所以当一个文件被选中时，我使用ng-upload API获取文件名并将其分配给$ scope.filename。

Answer 23

这是一个解决方案，它还显示了所选的文件名： 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; }

Answer 24

使用材质/角度文件上传这是一种很好的方法。您可以使用引导按钮执行相同的操作。

注意我使用<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>

Answer 25

仅限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;
}

Answer 26

css可以在这里做很多事......有点诡计......

<div id='wrapper'>
  <input type='file' id='browse'>
</div>

#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);
}

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

的 -abbey 的

Answer 27

我发现最好的方法是使用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")
    })

Answer 28

不要被＃34;伟大的＆＃34;愚弄仅限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>

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

Answer 29

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

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

单击带标签的图像时，选择文件按钮。

Answer 30

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

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

通过使用针对其容器定位/大小的伪元素，我们可以只使用一个输入文件（不需要额外的标记），并且按照惯例使用样式。

Demo

<input type="file" class="foo">

.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;
}

享受家伙！

旧更新

将其变成了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)

Answer 31

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

所以，这里的答案没有任何意义，但无论你如何修改它都会有效。您可以使用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-input元素或其任何子元素上发生的任何指针事件（单击）代理到文件输入。这是因为文件输入位于绝对位置，并且将始终消耗容器的宽度/高度。因此，您可以自定义以满足您的需求。将包装器设置为一个按钮，使用一些js在select上显示文件名等。只要上面的核心代码保持不变，就不会有任何破坏。

正如您将在演示中看到的那样，我添加了span文本＆＃34;选择文件＆＃34;以及一个具有额外样式的类来设置.file-input div的样式。对于任何打算创建自定义文件上传元素的人来说，这应该是规范的起点。

<强>演示： JSFIDDLE

Answer 32

如果您正在寻找一个javascript库 - 开箱即用的解决方案，jquery-fileinput工作正常。

Answer 33

最好的方法是使用伪元素：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;
}

Answer 34

提到JGuo和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>

Answer 35

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

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


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';
}

.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;
}

Answer 36

这是一个简单的css解决方案，可以创建一致的目标区域，并让您根据自己的喜好设计人造元素的样式。

基本理念是：

将两个“假”元素（文本输入/链接）作为真实文件输入的兄弟元素。绝对定位它们，使它们完全位于目标区域的顶部。
用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>

Answer 37

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

此插件允许您根据需要设置文件输入字段的样式。实际上，您将div元素设置为看似欺骗的文件输入，并且实际文件输入将自动覆盖0％不透明度。无需其他HTML。只需在您想要Drolex FileStyle的页面中包含css和js文件就可以了！根据自己的喜好编辑css文件。如果您的页面还没有它，请不要忘记jQuery库。如果客户端不运行JavaScript，则js或css不会修改文件输入。

经测试可在Chrome 24，Firefox 18，Internet Explorer 9中使用。预计将在以前的版本和其他版本中使用。

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

Answer 38

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

<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>
<?php 
    var_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>

Answer 39

快速粗暴的方法是将标签设置为按钮并将位置设置为绝对值，使其浮动在原始按钮上，您仍然可以看到文件名。我正在考虑移动解决方案。

Answer 40

在点击样式<input>时，只需使用trigger()功能模拟<div>上的点击即可。我在<div>中创建了自己的按钮，然后在点击input时触发了<div>点击。这允许您根据需要创建按钮，因为它是<div>并模拟对文件<input>的单击。然后在display: none上使用<input>。

// 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");
});

Answer 41

我发现这种方法最简单，最轻便。

以下是工作示例：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">

以这样的hacky方式隐藏输入：

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

设置相应的标签样式

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

样式“删除文件”按钮

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

.filename元素将用于显示所选文件

下面是需要注释的JS代码（使用jQuery）来使其工作：

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
});

Answer 42

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

如何显示文件名文字：

最简单的方法是将两个元素都设置为一个位置：relative，为标签指定一个更高的z-index，并为输入文件提供负边距，直到标签文本位于您希望的位置。不要在输入上使用display：none！

Example：

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;

}

Answer 43

Here's a cross compatible method which will work in Chrome, Firefox, Safari, and IE.

＆＃13;

$(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');
});

＆＃13;

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;}

＆＃13;

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

＆＃13;

设置输入类型=“文件”按钮的样式

43 个答案:

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

HTML

CSS

的jQuery

此处的工作示例包含本机拖放支持：https://jsfiddle.net/j40xvkb3/

可见性：隐藏TRICK

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

具有已转换文件名的多个文件解决方案

HTML：

1。带有jQuery的JS：

2。没有jQuery的JS

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