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

html CSS

猴子神奇

2020-03-16

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

第1819篇《设置输入类型=“文件”按钮的样式》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共14个回答
小胖 2020.03.16

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

这是一个简单的css only解决方案，它创建一致的目标区域，并让您按自己的喜好设置人造元素的样式。

基本思想是这样的：

  1. 有两个“假”元素（文本输入/链接）作为真实文件输入的同级元素。绝对放置它们，使它们恰好在目标区域的顶部。
  2. 用div包裹文件输入。将溢出设置为隐藏（这样文件输入不会溢出），并使其大小恰好等于您希望目标区域的大小。
  3. 将文件输入的不透明度设置为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>
MonsterKK梅 2020.03.16

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

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

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

宝儿凯 2020.03.16

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

小哥L 2020.03.16

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

请注意，我用它<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>
西里Pro 2020.03.16

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

仅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;
}
猿逆天GO 2020.03.16

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

您可能还会看一下这篇文章

小胖GO 2020.03.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;
}
猿飞云 2020.03.16 
 <label>
    <input type="file" />
 </label>

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

Harry神奇 2020.03.16

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

希望这对您有所帮助！

伽罗Mandy 2020.03.16

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

三叉戟

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

::-ms-browse {
  background: black;
  color: red;
  padding: 1em;
}
<input type="file">

在Windows 8的IE10中显示如下：

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

在OS X的Chrome 26中显示如下：

Mandy逆天 2020.03.16

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

猿小胖 2020.03.16

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android