如何自定义<input type ="file">？

Question

是否有可能改变外观<input type="file">？

Answer 1

您无法对input[type=file]控件本身进行太多修改.

由于单击label与输入正确配对的元素将激活/聚焦它,我们可以使用a label来触发OS浏览对话框.

这是你如何做到的......

label {
   cursor: pointer;
   /* Style as you please, it will become the visible UI component. */
}

#upload-photo {
   opacity: 0;
   position: absolute;
   z-index: -1;
}

<label for="upload-photo">Browse...</label>
<input type="file" name="photo" id="upload-photo" />

表单控件的CSS将使其看起来不可见,并且不占用文档布局中的空间,但仍然存在,因此可以通过它激活它label.

如果你想显示选择后用户所选择的道路,你可以监听change使用JavaScript事件,然后读取浏览器提供给您的路径(出于安全原因,它可以骗你约的确切路径).为最终用户提供漂亮的方法是简单地使用返回的路径的基本名称(因此用户只需看到所选的文件名).

Tympanus有一个伟大的指南来造型.

Answer 2

也许这样的事情？

<form>
  <input id="fileinput" type="file" style="display:none;"/>
</form>
<button id="falseinput">El Cucaratcha, for example</button>
<span id="selected_filename">No file selected</span>

<script>
$(document).ready( function() {
  $('#falseinput').click(function(){
    $("#fileinput").click();
  });
});
$('#fileinput').change(function() {
  $('#selected_filename').text($('#fileinput')[0].files[0].name);
});

</script>

Answer 3

  <label for="fusk">dsfdsfsd</label>
  <input id="fusk" type="file" name="photo" style="display: none;">

为什么不？^ _ ^

请参阅此处的示例

Answer 4

如果你在这里使用bootstrap是一个更好的解决方案:

<label class="btn btn-default btn-file">
    Browse <input type="file" style="display: none;">
</label>

对于IE8及以下 http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

资料来源:https://stackoverflow.com/a/18164555/625952

Answer 5

最简单的方法

<label>
     Upload
    <input type="file" style="visibility: hidden;"/>
</label>

Answer 6

这是一个快速的纯 CSS 解决方法（适用于 chrome，并包含 FireFox 后备），包括文件名、标签和自定义上传按钮，完成它应该做的事情 - 根本不需要 JavaScript！

\n

注意： \xe2\x98\x9d 无论如何，我不会在现实世界的网站上使用它 - 如果浏览器兼容性对你来说很重要（它应该是什么）。所以它更像是一种实验性的，否则随着时间的推移，这可能不再是今天的问题。

\n

\r\n

\r\n

.fileUploadInput {\n  display: grid;\n  grid-gap: 10px;\n  position: relative;\n  z-index: 1; }\n  \n  .fileUploadInput label {\n    display: flex;\n    align-items: center;\n    color: setColor(primary, 0.5);\n    background: setColor(white);\n    transition: .4s ease;\n    font-family: arial, sans-serif;\n    font-size: .75em;\n    font-weight: regular; }\n    \n  .fileUploadInput input {\n    position: relative;\n    z-index: 1;\n    padding: 0 gap(m);\n    width: 100%;\n    height: 50px;\n    border: 1px solid #323262;\n    border-radius: 3px;\n    font-family: arial, sans-serif;\n    font-size: 1rem;\n    user-select: none;\n    cursor: pointer;\n    font-weight: regular; }\n    .fileUploadInput input[type="file"] {\n      padding: 0 gap(m); }\n      .fileUploadInput input[type="file"]::-webkit-file-upload-button {\n        visibility: hidden;\n        margin-left: 10px;\n        padding: 0;\n        height: 50px;\n        width: 0; }\n        \n  .fileUploadInput button {\n    position: absolute;\n    right: 0;\n    bottom: 0;\n    width: 50px;\n    height: 50px;\n    line-height: 0;\n    user-select: none;\n    color: white;\n    background-color: #323262;\n    border-radius: 0 3px 3px 0;\n    font-family: arial, sans-serif;\n    font-size: 1rem;\n    font-weight: 800; }\n    .fileUploadInput button svg {\n      width: auto;\n      height: 50%; }\n\n* {\n  margin: 0px;\n  padding: 0px;\n  box-sizing: border-box;\n  border: 0px;\n  outline: 0;\n  background-repeat: no-repeat;\n  appearance: none;\n  border-radius: 0;\n  vertical-align: middle;\n  font-weight: inherit;\n  font-style: inherit;\n  font-family: inherit;\n  text-decoration: none;\n  list-style: none;\n  user-select: text;\n  line-height: 1.333em; }\n\nbody {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100vh;\n  background: rgba(66, 50, 98, 0.05); }\n\n.container {\n  padding: 25px;\n  box-shadow: 0 0 20px rgba(66, 50, 98, 0.35);\n  border: 1px solid #eaeaea;\n  border-radius: 3px;\n  background: white; }\n\n@-moz-document url-prefix() {\n.fileUploadInput button{\n    display: none\n}\n}

\r\n

<!-- Author: Ali Soueidan-->\n<!-- Author URI: https//: www.alisoueidan.com-->\n\n<div class="container">\n    <div class="fileUploadInput">\n    <label>\xe2\x9c\xa8 Upload File</label>\n    <input type="file" />\n    <button>+</button></div>\n</div>

\r\n

\r\n

\r\n

\n

Answer 7

在webkit中你可以尝试这个...

input[type="file"]::-webkit-file-upload-button{
   /* style goes here */
}

Answer 8

首先是一个容器：

<div class="upload_file_container">
    Select file!
    <input type="file" name="photo" />
</div>

第二种是CSS样式，如果您想进行更多的自定义，只需睁大眼睛:)

.upload_file_container{
   width:100px;
   height:40px;
   position:relative;
   background(your img);
}

.upload_file_container input{
   width:100px;
   height:40px;
   position:absolute;
   left:0;
   top:0;
   cursor:pointer;
}

此示例没有为按钮内的文本设置样式，它取决于字体大小，只需更正容器的高度和padding-top值

Answer 9

诀窍是隐藏输入并自定义标签。

HTML：

<div class="inputfile-box">
  <input type="file" id="file" class="inputfile" onchange='uploadFile(this)'>
  <label for="file">
    <span id="file-name" class="file-box"></span>
    <span class="file-button">
      <i class="fa fa-upload" aria-hidden="true"></i>
      Select File
    </span>
  </label>
</div>

CSS：

.inputfile-box {
  position: relative;
}

.inputfile {
  display: none;
}

.container {
  display: inline-block;
  width: 100%;
}

.file-box {
  display: inline-block;
  width: 100%;
  border: 1px solid;
  padding: 5px 0px 5px 5px;
  box-sizing: border-box;
  height: calc(2rem - 2px);
}

.file-button {
  background: red;
  padding: 5px;
  position: absolute;
  border: 1px solid;
  top: 0px;
  right: 0px;
}

JS：

function uploadFile(target) {
    document.getElementById("file-name").innerHTML = target.files[0].name;
}

您可以检查以下示例：https : //jsfiddle.net/rjurado/hnf0zhy1/4/

Answer 10

引导示例

<label className="btn btn-info btn-lg">
  Upload
  <input type="file" style="display: none" />
</label>