If you’re interested in Webkit/Blink/Chrome specific styling, there is a proprietary pseudo element to hide, and then use an also non-standard psudeo-on-an-input:
<input class="custom-file-input" type="file">.custom-file-input::-webkit-file-upload-button { visibility: hidden; } .custom-file-input::before { content: 'Select some files'; display: inline-block; background: linear-gradient(top, #f9f9f9, #e3e3e3); border: 1px solid #999; border-radius: 3px; padding: 5px 8px; outline: none; white-space: nowrap; -webkit-user-select: none; cursor: pointer; text-shadow: 1px 1px #fff; font-weight: 700; font-size: 10pt; } .custom-file-input:hover::before { border-color: black; } .custom-file-input:active::before { background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9); }Demo
Fair warning: it doesn’t show you the file name selected, but you might be able to tweak it to do that. I find typically these days you’re triggering an event after file selection and snagging the data that way anyway.
WTF Forms
Always worth checking out how WTF forms does it also:
You may also be interested in how to style common form elements or form input validation at DigitalOcean.
On Click of button, there is a extra margin which is in orange color, can you please tell how do I remove that?
use outline: none;
in css write outline:none; your problem will solve. That orange default color won’t appear
Thanks for sharing. There’re a small error on the code:
Must be:
Got that fixed, thanks!
Is there a way to get rid of the “No file selecte” text that comes from the browser?
There is some extra space around it, which bothers in my case of usage. Is there any way to remove it?
(Check image) http://www.abload.de/img/bildschirmfoto2014-01asxy4.png
I also notices that there is an extra invisible (but clickable) space after the pseudo
:beforeelement.In fact, that ‘extra’ space is actually the real
inputfile element.I solved this issue just by setting
visibility: hiddento main input element andsetting
visibility: visibleto pseudo before element (together withabsolutepositioning it).In this case there is no longer invisible white space although your pseudo element is actually running out of a main flow which can or cannot be acceptable for you depending on your situation.
Fiddle: http://jsfiddle.net/GALPG/
Thanks Pawel, this worked well. Firefox doesn’t seem to have this issue: you can make the input whatever width you like.
Hey, with Pawel’s fix, I’ve provided event handling.
http://jsfiddle.net/GALPG/16/
No
It doesn’t work on IE 9 :(
See title of snippet.
I’m interested to know which browsers this will work in?
@henry it should work in Safari and Chrome (as well as any other application that uses their rendering engines). It won’t work in IE since that uses a different rendering engine.
Thanks Chris. Pesky IE always ruins the party! Still a good solution though
This “custom file input” is not working in Firefox. Firefox is taking default stylings..
Is any way to change the cursor type like (cursor:pointer)?
I found the answer.
.custom-file-input {
color: transparent; cursor: pointer!important;
}
Thank you. It is very easy to use.
alternative solution:
not working in ie..
See title of snippet.
Did you make a screenshot of what it’s supposed to look like? On Firefox 30.0 using Ubuntu 14.10, there is just this : http://i.imgur.com/Bwh0oeP.png
This is showing an unstyled “Browse” in the Firefox I’m using which is the latest today…
See title of snippet.
webkit blink
Styling the input type file this way was very easy as only css was used. It solved my query.
How can we display the name of file and its type we selected … i.e. if i select a image file with name as xyz then it should display as xyz.jpg
Hi, thank you for the code. I have one problem though. Since my website will be in different languages, i cant use the css content property, because the text will be in different languages. Any alternative? Thank you!
I’ve created something which is a little more helpful for such a case, a jQuery plugin that gives you the ability to stylise everything about your input file, and also controlling it via a few callbacks :). I hope this may help someone.
Here is the source on github : Simple Input File
How can I invert the order of the elements?. I mean How can I set the button to the left and the file path text to the right?
File name is not showed. Can we add an indicator when a file is selected?
This tric is very help full thank you …
Kid, input tags can not take pseudo elements like img tag
On browsers this doesn’t work on…. you can overlay the actual button:
The essentials are:
1. the input element and the overlay <div> must have position: (for z-order to work)
2. the overlay must have a higher z-order
3. the overlay must have pointer-events:none
Yours,
TonyWilk
This does work in newer browsers, but don’t forget older versions of IE don’t support pointer-events:none.
The way I’m doing this is:
1) Custom styled element at z-index:0
2) File input absolutely position over the top at z-index:1
3) File input set to opacity:0 so it isn’t visible
Demo here: http://jsfiddle.net/wuguf376/
Or hide it and use a styled “ as the clicker
http://codepen.io/rosscosack/pen/opHxF
Nice Idea ;)
Very cool trick!
it’s easier than the widely mentioned method explained at Quirksmode.org
However it doesn’t seem to work with Firefox, which is showing the default button with the “Browse” label depending on the installation language of the browser and a caption saying “No file selected” as long as no file is selected (if one selects a file, it’s replaced by the file name).
Would it be possible at least to hide this caption? In order to show only the default browser button?
Thank you in advance for your kind help (I’m not a CSS expert).
Is this not browser friendly???
I m facing problem while running in firefox.
Thanks
See title of snippet.
(I’m just having fun at this point :))
Hi,
This works really good with Chrome. Any solution for Mozilla browser?
What for mozilla : moz ? and for IE and Opera ?
Not working in firefox….
.custom-file-input:before not working… any suggestion
Not Working in Firefox
I guess not many devs know what WebKit/Blink means. If only I could get a pay raise for knowing that when so many dont…
Or maybe they’re just part of the “do it yourself” gang.
Any web developer that doesn’t know what WebKit/Blink is – isn’t a web developer :P
Hello , thank you very much . That’s what helped!
Guys suggest me one thing, how can we also show selected file name after browse button using css and HTML
function example() {
location.href = ‘http://youtube.com’;
}
In both examples, I can’t see which file is currently selected (Firefox on WIndows 10).
So in that sense, the experience is worse than with the vanilla file uploader.
try using ::-ms-browse for IE, worked in IE11.
The file name (“No files chosen”) appears behind the label. :/
Set a larger width for the invisble element
For 2022 peeps late to the game like me, there’s now a standard (cross browser) psuedo element:
input[type="file"]::file-selector-button {/* custom CSS */
}