Burger mobile menu

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

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

CSS

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

Html code is the same.

CSS

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.

 

Tags: , , , , ,


Scroll top
Loading
Zdjęcie w lewo Zdjęcie w prawo