文件上传按钮的跨浏览器自定义样式

Question

我试图根据我的个人喜好设置文件上传按钮的样式，但是如果没有JS，我找不到任何真正可靠的方法来实现此目的。我确实找到了与此主题有关的另外两个问题，但是那里的答案要么涉及JavaScript，要么建议使用Quirksmode的方法。

我使用Quirksmode方法的主要问题是文件按钮仍将具有浏览器定义的尺寸，因此它不会自动调整为位于其下方的按钮。我已经基于它编写了一些代码，但是它只会占用文件按钮通常会占用的空间，因此它根本不会像我想要的那样填满父div。

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中，单击!!第二个演示按钮下方的按钮将始终打开文件对话框，但是在所有其他浏览器中，文件按钮也不会占用按钮的正确区域。

是否有更可靠的方式来设置文件上传按钮的样式，而不使用任何JavaScript，并且最好使用尽可能少的“
hacky”编码（因为hack通常会带来其他问题，例如小提琴中的问题）？

Answer 1

我发布这个是因为（令我惊讶）没有其他地方可以推荐这个。

有一种非常简单的方法来执行此操作，而不会限制您使用浏览器定义的输入尺寸。只需<label>在隐藏文件上传按钮周围使用标记即可。与通过webkit的内置样式1]允许的样式相比，这提供了更大的样式自由。

制作label标签的确切目的是将其上的所有单击事件定向到子输入[2]，因此使用该标签，您将不再需要任何JavaScript即可将click事件定向到输入按钮。您将使用类似以下的内容：

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>

我使用了固定的位置来隐藏输入，以使其即使在较旧版本的Internet Explorer（模拟IE8-拒绝在a
visibility:hidden或display:none文件输入中使用）中也能正常工作。我已经在模拟IE7及更高版本中进行了测试，并且效果很好。

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