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
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:
- 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).
- Me must only make it invisible, but in pretty way. By setting opacity to zero and minimizing it to 1×1 pixel.
- 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 🙂
