Html 样式输入类型=“文件”按钮

Question

提问by Shivanand

How do you style an input type="file"button?

你如何设计输入type="file"按钮的样式？

Answer 1

采纳答案by Jonathan Moffatt

Styling file inputs are notoriously difficult, as most browsers will not change the appearance from either CSS or javascript.

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

Even the size of the input will not respond to the likes of:

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

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

Instead, you will need to use the size attribute:

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

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

For any styling more sophisticated than that (e.g. changing the look of the browse button) you will need to look at the tricksy approach of overlaying a styled button and input box on top of the native file input. The article already mentioned by rm at www.quirksmode.org/dom/inputfile.htmlis the best one I've seen.

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

UPDATE

更新

Although it's difficult to style an <input>tag directly, this is easily possible with the help of a <label>tag. See answer below from @JoshCrozier: https://stackoverflow.com/a/25825731/10128619

虽然很难<input>直接设置标签的样式，但在标签的帮助下很容易实现<label>。请参阅下面来自@JoshCrozier 的回答：https://stackoverflow.com/a/25825731/10128619

Answer 2

回答by Josh Crozier

You don't need JavaScript for this! Here is a cross-browser solution:

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

See this example!- It works in Chrome/FF/IE - (IE10/9/8/7)

看这个例子！- 它适用于 Chrome/FF/IE - (IE10/9/8/7)

The best approach would be to have a custom label element with a forattribute attached to a hiddenfile input element. (The label's forattribute must match the file element's idin order for this to work).

最好的方法是让自定义标签元素具有for附加到隐藏文件输入元素的属性。（标签的for属性必须与文件元素的匹配id才能使其工作）。

<label for="file-upload" class="custom-file-upload">
    Custom Upload
</label>
<input id="file-upload" type="file"/>

As an alternative, you could also just wrap the file input element with a label directly: (example)

作为替代方案，您也可以直接用标签包装文件输入元素：（示例）

<label class="custom-file-upload">
    <input type="file"/>
    Custom Upload
</label>

In terms of styling, just hide¹the input element using the attribute selector.

在样式方面，只需使用属性选择器隐藏¹输入元素。

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

Then all you need to do is style the custom labelelement. (example).

然后您需要做的就是设置自定义label元素的样式。（例子）。

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

¹- It's worth noting that if you hide the element using display: none, it won't work in IE8 and below. Also be aware of the fact that jQuery validate doesn't validate hidden fieldsby default. If either of those things are an issue for you, here are two different methods to hide the input (1, 2) that work in these circumstances.

¹- 值得注意的是，如果您使用隐藏元素display: none，它将无法在 IE8 及以下版本中工作。还要注意 jQuery 验证默认不验证隐藏字段的事实。如果这些事情中的任何一个对您来说都是问题，这里有两种不同的方法来隐藏在这些情况下工作的输入 ( 1, 2)。

Answer 3

回答by teshguru

follow these steps then you can create custom styles for your file upload form:

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

this is the simple HTML form(please read the HTML comments I have written here below)

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

then use this simple script to pass the click event to file input tag.
```
function getFile(){
     document.getElementById("upfile").click();
}
```
Now you can use any type of styling without worrying about how to change default styles.

这是简单的 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>

然后使用这个简单的脚本将点击事件传递给文件输入标签。
```
function getFile(){
     document.getElementById("upfile").click();
}
```
现在您可以使用任何类型的样式而无需担心如何更改默认样式。

I know this very well because I have been trying to change the default styles for a month and a half. believe me, it's very hard because different browsers have different upload input tag. So use this one to build your custom file upload forms. Here is the full AUTOMATED UPLOAD code.

我很清楚这一点，因为我已经尝试更改默认样式一个半月了。相信我，这很难，因为不同的浏览器有不同的上传输入标签。所以使用这个来构建您的自定义文件上传表单。这是完整的自动上传代码。

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>

Answer 4

回答by Ryan

Hide it with css and use a custom button with $(selector).click() to activate the the browse button. then set an interval to check the value of the file input type. the interval can display the value for the user so the user can see whats getting uploaded. the interval will clear when the form is submitted [EDIT] Sorry i have been very busy was meaning to update this post, here is an example

用 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

回答by Wykk

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

Fiddle: http://jsfiddle.net/M7BXC/

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

You can reach your goals too without jQuery with normal JavaScript.

您也可以使用普通的 JavaScript 在没有 jQuery 的情况下实现您的目标。

Now the newBtn is linkes with the html_btn and you can style your new btn like you want :D

现在 newBtn 是与 html_btn 的链接，您可以根据需要设置新 btn 的样式：D

Answer 6

回答by Anselm

All rendering engines automatically generate a button when an <input type="file">is created. Historically, that button has been completely un-styleable. However, Trident and WebKit have added hooks through pseudo-elements.

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

Trident

三叉戟

As of IE10, the file input button can be styled using the ::-ms-browsepseudo-element. Basically, any CSS rules that you apply to a regular button can be applied to the pseudo-element. For example:

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

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

<input type="file">

This displays as follows in IE10 on Windows 8:

这在 Windows 8 上的 IE10 中显示如下：

This displays as follows in IE10 on Windows 8:

这在 Windows 8 上的 IE10 中显示如下：

WebKit

网页套件

WebKit provides a hook for its file input button with the ::-webkit-file-upload-buttonpseudo-element. Again, pretty much any CSS rule can be applied, therefore the Trident example will work here as well:

WebKit 为其文件输入按钮提供了一个带有::-webkit-file-upload-button伪元素的钩子。同样，几乎可以应用任何 CSS 规则，因此 Trident 示例也可以在这里使用：

::-webkit-file-upload-button {
  background: black;
  color: red;
  padding: 1em;
}

<input type="file">

This displays as follows in Chrome 26 on OS X:

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

This displays as follows in Chrome 26 on OS X:

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

Answer 7

回答by JDawg

If you are using Bootstrap 3, this worked for me:

如果您使用的是 Bootstrap 3，这对我有用：

See http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-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>

Which produces the following file input button:

它产生以下文件输入按钮：

Seriously, check out http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

说真的，看看http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

Answer 8

回答by kevcha

Working example here with native Drag and drop support : https://jsfiddle.net/j40xvkb3/

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

When styling a file input, you shouldn't break any of native interaction the input provides.

在为文件输入设置样式时，您不应破坏输入提供的任何本机交互。

The display: noneapproach breaks the native drag and drop support.

该display: none方法打破了原生拖放支持。

To not break anything, you should use the opacity: 0approach for the input, and position it using relative / absolute pattern in a wrapper.

为了不破坏任何东西，您应该使用opacity: 0输入的方法，并在包装器中使用相对/绝对模式定位它。

Using this technique, you can easily style a click / drop zone for the user, and add custom class in javascript on dragenterevent to update styles and give user a feedback to let him see that he can drop a file.

使用这种技术，您可以轻松地为用户设置单击/拖放区域的样式，并在 javascriptdragenter事件中添加自定义类以更新样式并为用户提供反馈，让他看到他可以拖放文件。

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

Here is a working example (with additional JS to handle dragoverevent and dropped files).

这是一个工作示例（带有额外的 JS 来处理dragover事件和删除的文件）。

https://jsfiddle.net/j40xvkb3/

Hope this helped !

希望这有帮助！

Answer 9

回答by Karthik

I am able to do it with pure CSSusing below code. I have used bootstrap and font-awesome.

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

回答by JGuo

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

You can wrap your input type="file" inside of a label for the input. Style the label however you'd like and hide the input with display: none;

您可以将 input type="file" 包装在输入标签内。根据需要设置标签样式并使用 display: none; 隐藏输入。

Html 样式输入类型=“文件”按钮

提问by Shivanand

采纳答案by Jonathan Moffatt

回答by Josh Crozier

You don't need JavaScript for this! Here is a cross-browser solution:

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

回答by teshguru

回答by Ryan

回答by Wykk

HTML

HTML

CSS

CSS

jQuery

jQuery

回答by Anselm

回答by JDawg

回答by kevcha

Working example here with native Drag and drop support : https://jsfiddle.net/j40xvkb3/

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

回答by Karthik

回答by JGuo

相关推荐

最近更新

标签

Html 样式输入类型=“文件”按钮

提问by Shivanand

采纳答案by Jonathan Moffatt

回答by Josh Crozier

You don't need JavaScript for this! Here is a cross-browser solution:

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

回答by teshguru

回答by Ryan

回答by Wykk

HTML

HTML

CSS

CSS

jQuery

jQuery

回答by Anselm

回答by JDawg

回答by kevcha

Working example here with native Drag and drop support : https://jsfiddle.net/j40xvkb3/

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

回答by Karthik

回答by JGuo

相关推荐

Html id 和 class 有什么区别？

Html 漂浮物不好吗？应该用什么代替它的位置

Html CSS：让块元素填充父元素的整个空间？

Html 将输入文本框定位在中心

相关推荐

最近更新

标签