I was creating a career page on a website for a client, My requirement was simple. I just needed to style the file input button of HTML in a way that it matches with my other Bootstrap buttons. I learnt that there is no traditional way to override the default button styles for the file input.
Let’s start with the basic HTML mockup
It consists of the following:
- A file input tag
- A label tag with
forlinked to the input tag
- A wrapper container
<div>to how these two elements
<label class =”new-button” for=”upload”> Upload CV
<input id=”upload” type=”file” >
Now Let’s style the
<label> tag to give it a button like look and then place it over the existing file input button.
padding: 8px 12px;
That’s it! You will get simple bootstrap like button for file input. Live CodePen link below.