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

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”编码（因为黑客通常带来其他问题，例如小提琴中的那些）？