Cross-browser Custom Styling For File Upload Button
Answer : I'm posting this because (to my surprise) there was no other place I could find that recommended this. There's a really easy way to do this, without restricting you to browser-defined input dimensions. Just use the <label> tag around a hidden file upload button. This allows for even more freedom in styling than the styling allowed via webkit's built-in styling [1] . The label tag was made for the exact purpose of directing any click events on it to the child inputs [2] , so using that, you won't require any JavaScript to direct the click event to the input button for you anymore. You'd to use something like the following: 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:act...