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

众所周知，对文件输入进行样式设置非常困难，因为大多数浏览器都不会通过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

您不需要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;
}

^1-值得注意的是，如果您使用隐藏元素display: none，则在IE8及更低版本中将无法使用。另请注意，jQuery validate 默认不会验证隐藏字段。如果任这些东西都是你的一个问题，这里有两个不同的方法来隐藏输入（1，2）在这种情况下的工作。

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

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代码。

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将其隐藏，并使用带有$（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;
    });
});

的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

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

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

带有本地拖放支持的工作示例：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/

希望这对您有所帮助！

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

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

您可以将输入type =“ file”包装在输入标签中。根据需要设置标签样式，并使用display隐藏输入内容：none;

这是一种解决方案，它实际上并未设置<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>

希望这可以帮助！！！

这对于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（）解析为更有意义的内容，但是您应该已经准备就绪。

将上传文件按钮放在漂亮的按钮或元素上，然后将其隐藏。

非常简单，可以在任何浏览器上使用

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

可见性：隐藏的技巧

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

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

您可能还会看这篇文章

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

在这里，我们使用一个span来触发文件类型的输入，并且我们只是自定义了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>

参考

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

请注意，我用它<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>

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

也许很多遮阳篷。但是我喜欢带有fa-button的纯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"/>

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

不要被“伟大的”纯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”。但是您可能希望每次用户提供文件时都获取该文件。

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

引导示例

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

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

本周，我还需要自定义按钮，并在其旁边显示所选的文件名，因此在阅读了上面的一些答案后（感谢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（角度）

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方面，我将文件名绑定到$ scope并为其赋予了“未选择文件”的初始值，我还将onFileSelect（）函数绑定到了我的范围，因此当选择文件时，我使用ng-upload API获取文件名，并将其分配给$ scope.filename。

单击样式化的时，只需<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");
});

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

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

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

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

-修道院

我发现了一种非常简单的方法将文件按钮切换为图片。您只需标记图片并将其放在文件按钮的顶部即可。

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

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

只有这种方法才能为您提供全部的灵活性！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上的某个地方得到了这个主意。）