Custom File Upload Button CSS

The default file input is awkward to style and renders differently in every browser. This hides it and puts a styled label in front.

Clicking the label opens the file dialog, because that is what a label does when it points at an input. Nothing is faked with JavaScript, so focus order and screen reader announcements behave the way people expect.

A few lines of script write the chosen filename beside the button. Delete them and the button still opens and uploads correctly, you just lose the filename readout.