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

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