How to Style Input File Upload button in CSS

style input file upload

Have you been thinking about managing HTML input file upload to make your page more awesome? Well, the wait is over. The answers to your prayers are all here.

I was also in that same situation few years back so I did my homework and now I can say I already got the fruits of my hard work and I want to share it all to you. I also believe that it is too complex to change the appearance of the file upload so each time I need to have a file upload button in my projects; I just make it the way it is typically done.

Now, I came to a point where in I need to change the look of the HTML input file button as a common button in one of my projects. I worked day and night playing with the codes and I discovered interesting facts.

Brace yourself.. Here it goes.

Step 1:  First we need to create our HTML Markup like this one. Check out the example below.


Step 2: Next is the tricky part, Open your style.css and copy and paste the code below.


Here is a demo to further help you out. I hope this helps you the way it helped me in changing the look of the input file in your current and upcoming projects.

See the Pen MYGYpJ by DrewCodeSpot (@drewcodespot) on CodePen.