HomeЮморRelated VideosMore From: Kishan Shetty

Styling Input Type File: Pure CSS solution

51 ratings | 7389 views
Adding a CSS style to the [ input type="file" ] using vanilla CSS has been a pain in the ass. Making changes to the button particularly is notorious. Hiding the element and styling it's label has it's own downsides. Here's a better way to achieve what is required! https://www.facebook.com/kishanwebdesigner https://www.instagram.com/kishanshetty97/
Category: Юмор
Html code for embedding videos on your blog
Text Comments (24)
sisi yudiari (2 months ago)
why is in mine the description of the file name half hidden under the css button
sisi yudiari (2 months ago)
Kishan Shetty  hehe sorry , i've figured it out. thank you though :)
Kishan Shetty (2 months ago)
I didn't quite get it. But are you sure you've set the margins right? Also what CSS button are you talking about?
Drew Kaplan (7 months ago)
You rock!
mayank srivastava (9 months ago)
Working only in chrome. "moz" not working
THOMAS GEORGE (9 months ago)
coool one. i usally create another button. add click listerner kind a things. but this is dope man !
thank u for sharing this video tutorial.
Aseem Khan (1 year ago)
bro not working for me yaar please help....
Aseem Khan (1 year ago)
Thnx buddy.. n what abt Edge Browser.. cuz i moslty use edge.. thnx
Kishan Shetty (1 year ago)
Aseem Khan Try replacing webkit with "moz" for Mozilla. And remove webkit for Safari.
Aseem Khan (1 year ago)
As u said about the linking i checked that n it started working.. thnx buddy.. but its only working with chrome.. if it works with other browser thn it will be very helpful.. thnxx
Kishan Shetty (1 year ago)
Aseem Khan There must be some problem with linking of the CSS then. Can you mail me a copy of the code?
Aseem Khan (1 year ago)
Microsoft edge.. but the button is not changing in any browser.. theirs no effect on css on it..
Indranil Jana (2 years ago)
sir not working sir in mozila
Indranil Jana (2 years ago)
both i tried but its works only chorme but not in firefox..
Kishan Shetty (2 years ago)
Try replacing webkit with "moz" for Mozilla. For safari, remove webkit. Cheers
Kishan Shetty (2 years ago)
Indranil Jana Hi, can you copy paste the code that you used so I can cross check?! Also, which browser are you using?
Jap Jap (2 years ago)
also, it is only working with chrome
Jap Jap (2 years ago)
it is not working on me, the ::webkit-file-upload-button
Jap Jap (2 years ago)
thank you
Kishan Shetty (2 years ago)
Hi, correction ::-webkit-file-upload-button And I'll try and get back to you on the 'Chrome only' part.
BenWillis (2 years ago)
Thanks a lot, this is really useful and easy.
Kishan Shetty (2 years ago)
Glad you liked it! :)

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.