Menu
Dev Bay – front-end tips
  • Front-end tips
  • Back-end tips
  • Converters
Dev Bay – front-end tips

CSS: Custom input file in Internet Explorer, Chrome and Firefox

Posted on May 20, 2018July 29, 2022

Input type file is always a coders nightmare. You can’t style it using common methods coming from CSS or HTML, because there are no options to style it using CSS input type file. The same situation is in all browsers, Internet Explorer, Chrome, Firefox, Edge or Opera. But there is quite easy workaround for that. We must wrap in HTML input type file with label and do some magic in CSS. We can do it in two ways. First, in modern way, we will use pseudo elements and second is to use image. So LET’S START ๐Ÿ™‚

Table of Contents

  • Custom input type file with CSS pseudo elements
  • Custom CSS style input type file with image
    • Related posts:

Custom input type file with CSS pseudo elements

Little tricky code ๐Ÿ™‚ With this method we can style input type file using normal CSS properties like for any other elements like div. The code is quite short and simple, please, check it below:

HTML

<label class="custom-input">
  <input type="file">
</label>

So it is simple label with input type file where we will add custom styling.

CSS

.custom-input {
  width: 300px;
  height: 66px;
  display: block;
  cursor: pointer;
  margin: 20px;
  border-radius: 5px;
  
  border: 5px dashed red;
  font-size: 25px;
  position: relative;
  color: #FFF;
  background-color: #000;
  border-radius: 10px;
}

.custom-input::before {
  content: "Select a file!";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.custom-input:hover,
.custom-input:focus {
  box-shadow: 0 0 10px #000;
  border: 5px solid red;
}

.custom-input input {
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

And here is that magic. Let’s check that step by step:

  1. Firstly, we have to hide in CSS input type file. Don’t use here “display: none;” property, because then input will be totally invisible, but it should be clickable for reading browser (accessibility).
  2. Me must only make it invisible, but in pretty way. By settingย  opacity to zero and minimizing it to 1×1 pixel.
  3. After that we set CSS pseudo element for label and we put it into property “content” text that we want to display in our styled input filed. We add few rules like position: absolute to position it in center of label. Remember to add “position: relative” for label. We add for label whatever styles we want.

With this a few easy steps we can make any custom styles in CSS for input type file. Check results below:

RESULTS

Custom CSS style input type file with image

Second method – we don’t use pseudo elements, but we must prepare before some nice image to use as the background for label. So this method is much less sophisticated – we just hide input type file under the background of its parent – label. Label element onclick triggers by default the click event on nested input type file element, so click on label’s background gives us normal behavior of input type file.

HTML

<label class="custom-input">
  <input type="file">
</label>

Html code is the same.

CSS

.custom-input input {
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.custom-input {
  background-image: url(https://dev-bay.com/examples/custom-input-file/background.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 300px;
  height: 66px;
  display: block;
  cursor: pointer;
  margin: 20px;
  border-radius: 5px;
}

.custom-input:hover,
.custom-input:focus {
  box-shadow: 0 0 10px #000;
}

Next we use prepared image as the background for label to make a custom look and feel of input type file. We have to remember to set property “display” to “block” to make label visible. At the end we add some special effects for hover and focus on the label. The results you can check below:

RESULTS


I hope I gathered here in compact way all necessary information how to make in CSS custom styles of input type file. We can say that this is a big gap in browsers that this is not possible, but with a few simple CSS tricks we can do that and leverage our website or web app.

THE END ๐Ÿ™‚

 

Related posts:

Insert JavaScript vuejs/react/angular apps into SalesForce page CSS: Custom checkbox style with image CSS: Show hide div without JavaScript
©2023 Dev Bay – front-end tips | Powered by SuperbThemes & WordPress