跨浏览器自定义样式的文件上传按钮 [英] Cross-browser custom styling for file upload button

问题描述

我试图根据个人偏好设置文件上传按钮的样式，但我没有找到任何真正可靠的方法来做这个没有JS。我找到了两个 其他有关此主题的问题，但是其中的答案涉及JavaScript，或建议 Quirksmode的方法。

I'm trying to style a file upload button to my personal preferences, but I couldn't find any really solid ways to do this without JS. I did find two other questions about this subject, but the answers there either involved JavaScript, or suggested Quirksmode's approach.

这个Quirksmode的方法的主要问题是，文件按钮仍然具有浏览器定义的尺寸，因此它不会自动调整为用作放置在其下面的按钮。我已经做了一些代码，基于它，但它只是占据了文件按钮通常会占用的空间，所以它不会填充父div像我想要的。

My major issue with this Quirksmode's approach is that the file button will still have the browser-defined dimensions, so it won't automatically adjust to whatever's used as button that's placed below it. I've made some code, based on it, but it will just take up the space the file button would normally take up, so it won't at all fill the parent div like I want it to.

HTML ：

<div class="myLabel">
    <input type="file"/>
    <span>My Label</span>
</div>

CSS：

.myLabel {
    position: relative;
}
.myLabel input {
    position: absolute;
    z-index: 2;
    opacity: 0;
    width: 100%;
    height: 100%;
}

这个小提示 演示了这种方法是否有缺陷。在Chrome中，点击第二个演示按钮下面的 !! 将打开文件对话框，但在所有其他浏览器中，文件按钮不占用正确的区域

This fiddle demonstrates how this approach is quite flawed. In Chrome, clicking the !! below the second demo button will open the file dialog anyway, but also in all other browsers, the file button doesn't take up the correct areas of the button.

有没有任何更坚实的方式来设置文件上传按钮的样式，没有任何JavaScript，最好尽可能少使用'hacky'编码

Is there any more solid way to style the file upload button, without any JavaScript, and preferably using as little 'hacky' coding as possible (since hacking usually brings other problems along with it, such as the ones in the fiddle)?

推荐答案

我发布了这个因为（令我惊讶的是）没有其他地方我可以找到，建议这个。

I'm posting this because (to my surprise) there was no other place I could find that recommended this.

有一个很容易的方法来做到这一点，浏览器定义的输入维度。只需使用隐藏文件上传按钮周围的< label> 标记即可。这允许在样式方面比通过 webkit的内置样式允许的样式更自由 ^[1] 。

There's a really easy way to do this, without restricting you to browser-defined input dimensions. Just use the <label> tag around a hidden file upload button. This allows for even more freedom in styling than the styling allowed via webkit's built-in styling^[1].

标签标签是为了将任何点击事件定向到子输入< sup> [2] ，所以使用它，你不需要任何JavaScript将点击事件直接指向输入按钮。您将使用类似以下内容：

The label tag was made for the exact purpose of directing any click events on it to the child inputs^[2], so using that, you won't require any JavaScript to direct the click event to the input button for you anymore. You'd to use something like the following:

label.myLabel input[type="file"] {
    position: fixed;
    top: -1000px;
}

/***** Example custom styling *****/
.myLabel {
    border: 2px solid #AAA;
    border-radius: 4px;
    padding: 2px 5px;
    margin: 2px;
    background: #DDD;
    display: inline-block;
}
.myLabel:hover {
    background: #CCC;
}
.myLabel:active {
    background: #CCF;
}
.myLabel :invalid + span {
    color: #A44;
}
.myLabel :valid + span {
    color: #4A4;
}

<label class="myLabel">
    <input type="file" required/>
    <span>My Label</span>
</label>

我使用固定的位置隐藏输入，使其工作，甚至在古代版本的Internet Explorer（模拟IE8-拒绝工作在 visibility：hidden 或 display：none 文件输入）。我已经在模拟的IE7及以上测试，并且它工作完美。

I've used a fixed position to hide the input, to make it work even in ancient versions of Internet Explorer (emulated IE8- refused to work on a visibility:hidden or display:none file-input). I've tested in emulated IE7 and up, and it worked perfectly.

1. 不幸的是，在< label> 标签中使用< button> s，因此您必须定义风格的按钮自己。


2. 如果定义属性的，其值将用于触发输入与< label> 上的属性相同的 id c $ c>。



1. You can't use <button>s inside <label> tags unfortunately, so you'll have to define the styles for the buttons yourself. To me, this is the only downside to this approach.
2. If the for attribute is defined, its value is used to trigger the input with the same id as the for attribute on the <label>.

这篇关于跨浏览器自定义样式的文件上传按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！