CSS: Custom input file in Internet Explorer, Chrome and Firefox
Piotr Elmanowski | Published: 20 May, 2018
Input type file is always a coders nightmare. You can’t style it using common methods coming from CSS, 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 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 🙂
CSS: Style input type file with 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.
HTML
|
1 2 3 |
<label class="custom-input"> <input type="file"> </label> |
So it is simple label with input type file where we will add custom styling.
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
.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. Firstly, we have to hide input. Don’t use here “display: none;” property, because then input will be totally invisible, but it should be clickable for reading browser (eg. for blind people). Me must only make it invisible, but in pretty way. After that we set CSS pseudo element for label and we put 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.
RESULTS
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.
HTML
|
1 2 3 |
<label class="custom-input"> <input type="file"> </label> |
Html code is the same.
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.custom-input input { opacity: 0; width: 1px; height: 1px; overflow: hidden; } .custom-input { background-image: url(http://css-workshop.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. 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
THE END 🙂 if you have some questions, please add it in comments below.
