When attempting to customize a file upload button to my liking, I encountered difficulties in finding a reliable method without relying on JavaScript. Although I came across two other questions on this topic, the solutions either involved JavaScript or suggested using Quirksmode's approach.
The main drawback of Quirksmode's approach is that the file button retains the dimensions defined by the browser, failing to adjust automatically to match the button placed below it. Despite crafting some code based on this approach, the button only occupies the usual space rather than filling the parent div as intended.
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 illustrates the flaws in this approach. In Chrome, clicking the !!
below the second demo button still triggers the file dialog, while in other browsers, the file button fails to occupy the correct button area.
Are there more effective methods to style the file upload button without resorting to JavaScript and minimizing "hacky" coding practices (which often lead to unforeseen issues like the ones in the fiddle)?