This was a problem that I recently faced, default file upload button is rendered differently in different browsers, example in one browser it renders as a button but another browser it renders as button and a text field this creates few problems for designers, one is we can’t have a consistent layout also when designing a page we might have to think more about allocating space for it to get good cross browser compatibility with the design. but the main problem for me is it is ugly 🙂

So what can we do about this ? 

Well there are two I think, first Is using a UI framework like Bootstrap, foundation etc.  But if we are modifying an existing website this might not possible. so the best solution is to hide this component and manipulate it using javascript, so here is the process first hiding this component inside a div which set to 0 width and 0 height and then create another div that act as a button and transfer it’s click event to the file upload to open file browser. very simple solution at the end 

This  is what you get at the end 

Here is the full code 

 

    

        
Browse