我正在尝试根据个人喜好设置文件上传按钮的样式，但如果没有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”编码（因为黑客通常带来其他问题，例如小提琴中的那些）？