Styling HTML file input button with Pure CSS (without losing the file name text)

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.

I went through a number of solutions on the internet, The solutions with pure CSS totally removed the file name text beside the button and the ones which display used a lot of javascript to do it.

I Personally prefer to use minimal Javascript to style basic elements, hence I came up with this solution which uses only CSS and still retains the text which we all want.

Let’s start with the basic HTML mockup

It consists of the following:

  1. A file input tag
  2. A label tag with for linked to the input tag id
  3. A wrapper container <div> to how these two elements

Now Let’s style the <label> tag to give it a button like look and then place it over the existing file input button.

That’s it! You will get simple bootstrap like button for file input. Live CodePen link below.

Freelance Web Developer, digital nomad and a design enthusiast.

Freelance Web Developer, digital nomad and a design enthusiast.