<分区>
<分区>
我正在尝试根据个人喜好设置文件上传按钮的样式，但如果没有 JS，我找不到任何真正可靠的方法来完成此操作。我确实找到了 two other关于这个主题的问题，但那里的答案要么涉及 JavaScript，要么建议 Quirksmode's approach .
我对这种 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%;
}
This fiddle证明了这种方法是多么有缺陷。在 Chrome 中，点击第二个演示按钮下方的 !! 无论如何都会打开文件对话框，但在所有其他浏览器中，文件按钮也不会占据按钮的正确区域。
是否有更可靠的方法来设置文件上传按钮的样式，无需任何 JavaScript，并且最好使用尽可能少的“hacky”编码(因为 hacking 通常会带来其他问题，例如 fiddle 中的问题) ？
最佳答案
我发布这个是因为(令我惊讶的是)我找不到其他地方推荐这个。
有一种非常简单的方法可以做到这一点，而不会将您限制在浏览器定义的输入维度。只需使用 <label>标记隐藏的文件上传按钮。这比通过 webkit's built-in styling 允许的样式允许更多的样式自由。 [1].
制作标签的确切目的是将其上的任何点击事件定向到子输入[2]，因此使用它，您不需要任何 JavaScript 来定向点击事件到你的输入按钮了。你会使用类似下面的东西:
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- 拒绝在 visibility:hidden 或 display:none 文件输入上工作)。我已经在模拟的 IE7 及更高版本中进行了测试，它运行良好。
<button>里面的<label>不幸的是标签，所以你必须自己定义按钮的样式。对我来说，这是这种方法的唯一缺点。for属性已定义，其值用于触发具有相同 id 的输入作为 for <label> 上的属性.关于html - 文件上传按钮的跨浏览器自定义样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41060722/