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

Question

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

Answer 1

你不需要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 validate 默认情况下不验证隐藏字段.如果任这些东西都是你的一个问题,这里有两个不同的方法来隐藏输入(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代码.

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

请享用!

祝你今天愉快,

Answer 4

::file-selector-button

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

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

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

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>

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

自定义输入文本

如果您想自定义文件选择器按钮的文本，这里有一个片段：

document.querySelector("#files").onchange = function() {
  const fileName = this.files[0]?.name;
  const label = document.querySelector("label[for=files]");
  label.innerText = fileName ?? "Browse Files";
};

label {
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 5px 10px;
  font-family: 'Helvetica', sans-serif;
  transition: .5s;
}

label:hover {
  background-color: #eee;
}

<div class="input_container">
  <label for="files" class="btn">Browse Files</label>
  <input id="files" style="display:none;" type="file">
</div>

为了简单起见，我更喜欢使用普通解决方案。如果您想要上述代码片段的 jQuery 版本，请查看这篇文章。

Answer 5

使用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 6

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 7

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

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

只有 CSS

使用这个非常简单和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">

Answer 10

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

这里的工作示例使用本机拖放支持:https://jsfiddle.net/ms3bbazv/4/

在设置文件输入样式时,不应该破坏输入提供的任何本机交互.

该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/ms3bbazv/4/

希望这有帮助!

Answer 12

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

您可以将输入类型="文件"包装在输入的标签内.根据您的喜好设置标签样式,并使用display:none隐藏输入;

Answer 13

这种方法为您提供了整体的灵活性！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 14

使用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()解析为更有意义的内容,但您应该全部设置.

Answer 15

这是一个解决方案,它没有真正设置<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>

希望这可以帮助!!!

Answer 16

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

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

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

可见性:隐藏的TRICK

我经常去寻找visibility:hidden技巧

这是我的风格按钮

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

这是input type = file按钮.请注意visibility:hidden规则

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

这是将它们粘合在一起的JavaScript位.有用

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

Answer 18

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

引导示例

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. JS 与 jQuery：

$().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

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

你也可以看一下这篇文章

Answer 20

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

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

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

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

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

在这里，我们使用一个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>

参考

Answer 24

这是一个纯 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 中对其进行测试。