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

问题描述

我正在尝试根据我的个人喜好设置文件上传按钮的样式，但是如果没有 JS，我找不到任何真正可靠的方法来做到这一点.我确实找到了两个其他 关于这个主题的问题，但那里的答案要么涉及 JavaScript，要么建议 Quirksmode 的方法.

我对这种 Quirksmode 方法的主要问题是文件按钮仍将具有浏览器定义的尺寸，因此它不会自动调整到用作放置在其下方的按钮的任何内容.我已经基于它编写了一些代码，但它只会占用文件按钮通常占用的空间，因此它根本不会像我想要的那样填充父 div.

HTML:

<输入类型=文件"/><span>我的标签</span>

CSS:

.myLabel {位置:相对；}.myLabel 输入 {位置:绝对；z-索引:2；不透明度:0；宽度:100%；高度:100%；}

这个小提琴 展示了这种方法是多么有缺陷.在 Chrome 中，点击第二个演示按钮下方的 !! 无论如何都会打开文件对话框，但在所有其他浏览器中，文件按钮不会占据按钮的正确区域.>

有没有更可靠的方法来设置文件上传按钮的样式，不使用任何 JavaScript，并且最好使用尽可能少的hacky"编码(因为黑客通常会带来其他问题，例如小提琴中的问题)?

解决方案

我发布这个是因为(令我惊讶的是)我找不到其他推荐这个的地方.

有一种非常简单的方法可以做到这一点，而不会限制您使用浏览器定义的输入尺寸.只需在隐藏文件上传按钮周围使用 标签即可.这比通过 webkit 允许的样式提供更多的样式自由内置样式^[1].

标签标签的确切目的是将其上的任何点击事件定向到子输入^[2]，因此使用它，您将不需要任何 JavaScript 来定向点击事件到您的输入按钮了.您将使用以下内容:

label.myLabel input[type="file"] {位置:绝对；顶部:-1000 像素；}/***** 自定义样式示例 *****/.myLabel {边框:2px 实心#AAA；边框半径:4px；填充:2px 5px；边距:2px；背景:#DDD；显示:内联块；}.myLabel:悬停{背景:#CCC；}.myLabel:active {背景:#CCF；}.myLabel : 无效 + 跨度 {颜色:#A44；}.myLabel :有效 + 跨度 {颜色:#4A4；}

<input type="file" required/><span>我的标签</span></label>

我使用了一个固定的位置来隐藏输入，使其即使在旧版本的 Internet Explorer 中也能工作(模拟 IE8-拒绝在 visibility:hidden 或 display 上工作:none 文件输入).我已经在模拟 IE7 及更高版本中进行了测试，并且运行良好.

<小时>

1. 不幸的是，您不能在 标签内使用 ，因此您必须自己定义按钮的样式.对我来说，这是这种方法的唯一缺点.
2. 如果定义了 for 属性，则其值用于触发与 for 属性具有相同 id 的输入代码><标签>.

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.

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

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.

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.

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

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:absolute;
    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>

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. 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屋！