html - Styling an input type="file" button - Stack Overflow 5/30/17, 4*48 PM

x Dismiss

Join the Stack Overflow Community

Stack Overflow is a community of 7.2 million

programmers, just like you, helping each other.
Join them; it only takes a minute:

Sign up

Styling an input type=file button

How to style the input type="file" button.

html css file-io

edited Jun 1 '14 at 18:35 asked Feb 21 '09 at 10:36

Joeytje50 Shivanand
11.2k 3 35 60 2,222 5 17 31

1 possible duplicate of Styleize <input type="file"> Gilles Jun 20 '11 at 10:22

76 @Gilles fml. you're trying to make an infinite loop EaterOfCode Jul 29 '13 at 9:36

@EaterOfCode what does your sentence mean? Abdul Jabbar WebBestow Dec 4 '14 at 6:43

7 @AbdulJabbarWebBestow if you click the link provided by Gilles you will see that it says "Possible
duplicate" too, and redirects here. Recursivity. saiyancoder Dec 11 '14 at 6:45

@saiyancoder OK thanks actually I thought that this is some kind of slang sentence. Thanks
Abdul Jabbar WebBestow Dec 11 '14 at 9:09

34 Answers

1 2 next

Styling file inputs is notoriously difficult, as most browsers will not change the appearance from
either css or javascript.

Even the size of the input will not respond to the likes of:

<input type="file" style="width:200px">

Instead you will need to use the size attribute:

<input type="file" size="60" />

For any styling more sophisticated than that (e.g. changing the look of the browse button) you
will need to look at the tricksy approach of overlaying a styled button and input box on top of
the native file input. The article already mentioned by rm at
www.quirksmode.org/dom/inputfile.html is the best one I've seen.

edited Oct 6 '11 at 4:51 answered Apr 3 '09 at 16:11

Jonathan Moffatt
7,525 4 36 40

https://stackoverflow.com/questions/572768/styling-an-input-type-file-button Page 1 of 19
html - Styling an input type="file" button - Stack Overflow 5/30/17, 4*48 PM

5 Just found a jquery solution based on this script here: blog.vworld.at/2008/08/21/ mtness Feb 3 '11 at
16:23

1 @TLK Ryan's answer won't work in IE when trying to do iframe uploads. It gives you an access denied error.
For normal uploads, I agree it is the easiest though! frostymarvelous Dec 30 '13 at 13:54

3 A much simpler solution than quirksmode's is explained here. Just putting that link here, since this answer is
basically a link-only answer anyway. Joeytje50 May 7 '14 at 16:30

8 For anyone interested in a modern approach, i'd suggest looking at this answer. It doesn't require
JavaScript like some of the other answers either. Josh Crozier Sep 13 '14 at 17:43

2 @JoshCrozier posted an insanely much better solution. Even beats fake-mouseclicking solutions :)
Lodewijk Sep 18 '14 at 0:16

You don't need JavaScript for this! Here is a cross-browser solution:

See this example! - It works in Chrome/FF/IE - (IE10/9/8/7)

The best approach would be to have a custom label element with a for attribute attached to a
hidden file input element. (The label's for attribute must match the file element's id in order
for this to work).

<label for="file-upload" class="custom-file-upload">

Custom Upload
</label>
<input id="file-upload" type="file"/>

As an alternative, you could also just wrap the file input element with a label directly:
(example)

<label class="custom-file-upload">
<input type="file"/>
Custom Upload
</label>

In terms of styling, just hide1 the input element using the attribute selector.

input[type="file"] {
display: none;
}

Then all you need to do is style the custom label element. (example).

.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}

1 - It's worth noting that if you hide the element using display: none , it won't work in IE8 and
below. Also be aware of the fact that jQuery validate doesn't validate hidden fields by default. If
either of those things are an issue for you, here are two different methods to hide the input (1,
2) that work in these circumstances.

edited May 23 at 12:26 answered Sep 13 '14 at 17:24

Community Josh Crozier
1 1 117k 27 172 176

44 Absolutely amazing compared to the other options out there! This solution deserves so many more
upvotes! Lodewijk Sep 18 '14 at 0:15

20 I do have a question with this one though, when selecting a file how would we go about then displaying the
file name ? Richlewis Jan 20 '15 at 12:17

1 @Richlewis Any luck with displaying the file name? Id like to display the image as well... Asle G Feb 10
'15 at 9:17

9 How to display the name of selected file if display: none is set for input[type=file] ?
Sarthak Singhal Aug 7 '15 at 9:17

https://stackoverflow.com/questions/572768/styling-an-input-type-file-button Page 2 of 19
html - Styling an input type="file" button - Stack Overflow 5/30/17, 4*48 PM

12 Great solution, but you actually do need javascript. If you want to display the file name, as other people
have been asking, you need to add a span between the label and the hidden input: <span id="file-
selected"></span>. Then update the span on the change event: $('#file-upload').bind('change', function() {
var fileName = ''; fileName = $(this).val(); $('#file-selected').html(fileName); }) Sam Apr 6 '16 at 19:05

follow these steps then you can create custom styles for your file upload form:

1.) this is the simple html form(please read the html comments i have written here below)

<form action="#type your action here" method="POST" enctype="multipart/form-data">

<div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB;
cursor:pointer;" onclick="getFile()">Click to upload!</div>
<!-- this is your file input tag, so i hide it!-->
<div style='height: 0px;width:0px; overflow:hidden;'><input id="upfile" type="file"
value="upload"/></div>
<!-- here you can have file submit button or you can write a simple script to upload
the file automatically-->
<input type="submit" value='submit' >
</form>

2.) then use this simple script to pass the click event to file input tag.

function getFile(){
document.getElementById("upfile").click();
}

now you can use any type of a styling without worrying how to change default styles. i know
this very well, because i have been trying to change the default styles for month and a half.
believe me it's very hard because different browsers have different upload input tag. So use
this one to build your custom file upload forms.Here is the full AUTOMATED UPLOAD code.

<html>
<head>
<style>
#yourBtn{
position: relative;
top: 150px;
font-family: calibri;
width: 150px;
padding: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border: 1px dashed #BBB;
text-align: center;
background-color: #DDD;
cursor:pointer;
}
</style>
<script type="text/javascript">
function getFile(){
document.getElementById("upfile").click();
}
function sub(obj){
var file = obj.value;
var fileName = file.split("\\");
document.getElementById("yourBtn").innerHTML = fileName[fileName.length-1];
document.myForm.submit();
event.preventDefault();
}
</script>
</head>
<body>
<center>
<form action="#type your action here" method="POST" enctype="multipart/form-data"
name="myForm">
<div id="yourBtn" onclick="getFile()">click to upload a file</div>
<!-- this is your file input tag, so i hide it!-->
<!-- i used the onchange event to fire the form submission-->
<div style='height: 0px;width: 0px; overflow:hidden;'><input id="upfile" type="file"
value="upload" onchange="sub(this)"/></div>
<!-- here you can have file submit button or you can write a simple script to upload the
file automatically-->
<!-- <input type="submit" value='submit' > -->
</form>
</center>
</body>
</html>

https://stackoverflow.com/questions/572768/styling-an-input-type-file-button Page 3 of 19
html - Styling an input type="file" button - Stack Overflow 5/30/17, 4*48 PM

enjoy!

Have a Nice Day,

edited May 2 '15 at 17:34 answered Mar 3 '12 at 14:42

MrTux teshguru
12.9k 10 28 73 2,891 1 12 6

6 @user1053263 -> Thanks for the recommendation.. here i used a very simple java script, no need to use
frameworks like Jquery or PrototypeJS. teshguru Mar 15 '12 at 6:09

3 works on every browser I've tried, light weight and easy. user1053263 Mar 15 '12 at 12:46

7 I'm having troubles submitting the form in IE9. I'm getting an 'Access is Denied' error which trying to submit
the form via javascript. If i click the submit button via the UI, it works. Is there a work around for this?
Kevin Mar 23 '12 at 19:29

1 @kevin -> Please try event.preventDefault() after document.myForm.submit() , i made the change to the
above code. teshguru Mar 24 '12 at 4:21

10 In IE10 (and possibly IE9, etc.) you will get "Access is Denied" (or no response from jQuery) if you try and
automatically submit the form after clicking the file input button through javascript. So this method works for
styling the file input button as long as the user is still the one submitting the form. Took me a while to find
this and I see others also have the same issue. See this for more info
stackoverflow.com/a/4335390/21579. Jeff Widmer Mar 19 '13 at 13:28

Hide it with css and use a custom button with $(selector).click() to activate the the browse
button. then set an interval to check the value of the file input type. the interval can display the
value for the user so the user can see whats getting uploaded. the interval will clear when the
form is submitted [EDIT] Sorry i have been very busy was meaning to update this post, here is
an example

<form action="uploadScript.php" method="post" enctype="multipart/form-data">

<div>
<!-- filename to display to the user -->
<p id="file-name" class="margin-10 bold-10"></p>

<!-- Hide this from the users view with css display:none; -->
<input class="display-none" id="file-type" type="file" size="4" name="file"/>

<!-- Style this button with type image or css whatever you wish -->
<input id="browse-click" type="button" class="button" value="Browse for files"/>

<!-- submit button -->

<input type="submit" class="button" value="Change"/>
</div>

$(window).load(function () {
var intervalFunc = function () {
$('#file-name').html($('#file-type').val());
};
$('#browse-click').on('click', function () { // use .live() for older versions of
jQuery
$('#file-type').click();
setInterval(intervalFunc, 1);
return false;
});
});

edited Apr 26 '13 at 12:55 answered Jul 5 '11 at 11:14

Ryan
948 6 10

2 This is far smarter. Wish I'd read this one first. I fooled around with the other solutions until I came up with
that myself...too late. :) TLK Dec 4 '11 at 0:09

7 Note that if you use this way it will break in internet explorer because its an security exception.. Rejinderi
Jan 30 '12 at 15:17

1 thanks the tip. When i use IE it usually has a separate layout to everything else. HATE IE. but i simplify
everything in IE. Ryan Jan 31 '12 at 8:54

1 With FF20, $('#file-type').click() doesn't seem to bring up the "Choose file" dialg- in fact nothing happens.
Any ideas? andig Mar 10 '13 at 11:02

https://stackoverflow.com/questions/572768/styling-an-input-type-file-button Page 4 of 19
html - Styling an input type="file" button - Stack Overflow 5/30/17, 4*48 PM

2 Try using the trigger method in jquery. Also .live changed to .on() in the new jquery Ryan Mar 18 '13 at
8:34

HTML
<div class="new_Btn">SelectPicture</div><br>
<input id="html_btn" type='file'" /><br>

CSS
.new_Btn {
// your css propterties
}

#html_btn {
display:none;
}

jQuery

$('.new_Btn').bind("click" , function () {
$('#html_btn').click();
});
//edit: 6/20/2014: Be sure to use ".on" not ".bind" for newer versions of jQuery

Fiddle: http://jsfiddle.net/M7BXC/

You can reach your goals too without jQuery with normal JavaScript.

Now the newBtn is linkes with the html_btn and you can style your new btn like you
want :D

edited Jun 20 '14 at 23:33 answered Aug 2 '12 at 8:13

Mister Oh Wykk
194 7 526 4 11

1 Just curious, does it work in every browser of new generation such as Firefox, IE, Opera, Safari, Chrome,
etc? Wh1T3h4Ck5 Oct 4 '12 at 23:17

This is the simplest solution for me! A least in IE 9, Chrome 23 and FF 16 with jQuery 1.7.2, so with updated
versions it should work. Dani bISHOP Nov 14 '12 at 11:38

1 I don't think it would work on IE 6, 7 and 8 Mehdi Karamosly Jul 9 '13 at 22:02

2 @MehdiKaramosly it works even on IE 6 - but that is true only up to jQuery 1.x , jQuery 2.x+ does not
support old IEs jave.web May 21 '14 at 15:01

1 @Ando via Javascript/jQuery => the value of the file input is empty or contains local file path => use
onchange event and test for val() :) see jsfiddle.net/ZrBPF jave.web May 21 '14 at 15:16

All rendering engines automatically generate a button when an <input type="file"> is created.
Historically, that button has been completely un-styleable. However, Trident and WebKit have
added hooks through pseudo-elements.

Trident

As of IE10, the file input button can be styled using the ::-ms-browse pseudo-element.
Basically, any CSS rules that you apply to a regular button can be applied to the pseudo-
element. For example:

::-ms-browse {
background: black;
color: red;
padding: 1em;
}

<input type="file">

https://stackoverflow.com/questions/572768/styling-an-input-type-file-button Page 5 of 19
html - Styling an input type="file" button - Stack Overflow 5/30/17, 4*48 PM

Run code snippet Expand snippet

This displays as follows in IE10 on Windows 8:

WebKit

WebKit provides a hook for its file input button with the ::-webkit-file-upload-button pseudo-
element. Again, pretty much any CSS rule can be applied, therefore the Trident example will
work here as well:

::-webkit-file-upload-button {
background: black;
color: red;
padding: 1em;
}

<input type="file">

Run code snippet Expand snippet

This displays as follows in Chrome 26 on OS X:

edited Oct 4 '16 at 18:03 answered May 1 '13 at 7:37

Anselm Urban
2,693 2 17 41

2 And for Firefox? Nizam Jul 30 '13 at 6:00

There are no special styling possibilities for Gecko-based programs like Firefox. Anselm Urban Jul 30 '13
at 17:47

1 In you answer,using css,how to hide the "No file chosen" word in <input type=file> tag.Please comment me.
user2086641 Aug 13 '13 at 19:37

I have no idea, sorry Anselm Urban Aug 24 '13 at 9:56

1 source: tjvantoll.com/2013/04/15/ Anselm Urban Oct 13 '14 at 20:03

<label>
<input type="file" />
</label>

https://stackoverflow.com/questions/572768/styling-an-input-type-file-button Page 6 of 19
html - Styling an input type="file" button - Stack Overflow 5/30/17, 4*48 PM

You can wrap your input type="file" inside of a label for the input. Style the label however you'd
like and hide the input with display: none;

answered Aug 23 '12 at 1:33

JGuo
319 2 7

1 Doesn't work in IE8 Malkin Jan 28 '14 at 13:30

18 nothing works in IE8 ;) JGuo Mar 21 '14 at 0:44

Does not work on IE11 Antti Haapala Mar 2 '16 at 7:56

If you are using Bootstrap 3, this worked for me:

See http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-
bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<span class="btn btn-primary btn-file">

Browse...<input type="file">
</span>

Run code snippet Expand snippet

Which produces the following file input button:

Seriously, check out http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-

bootstrap-3/

edited Aug 18 '16 at 17:35 answered Aug 5 '15 at 16:49

JDawg
713 8 18

This is simple with jquery. To give a code example of Ryan's suggestion with a slight
modification.

Basic html:

<div id="image_icon"></div>
<div id="filename"></div>
<input id="the_real_file_input" name="foobar" type="file">

Be sure to set the styling on the input when you're ready: opacity: 0 You can't set display:

https://stackoverflow.com/questions/572768/styling-an-input-type-file-button Page 7 of 19
html - Styling an input type="file" button - Stack Overflow 5/30/17, 4*48 PM

nonebecause it needs to be clickable. But you can position it under the "new" button or tuck in
under something else with z-index if you prefer.

Setup some jquery to click the real input when you click the image.

$('#image_icon').click(function() {
$('#the_real_file_input').click();
});

Now your button is working. Just cut and paste the value when changed.

$('input[type=file]').bind('change', function() {
var str = "";
str = $(this).val();
$("#filename").text(str);
}).change();

Tah dah! You may need to parse the val() to something more meaningful but you should be all
set.

edited May 23 at 12:10 answered Dec 4 '11 at 0:38

Community TLK
1 1 1,230 1 14 30

1 this will fail with FF11 - reason: since you cannot precisely influence size of input field (only by using html
size) and button (you can set height using css), if your visible input field is larger than original FF provides
us with, you are left with a very big blind area - user standpoint: in most cases he'll complain that upload
does not work, when clicked Jeffz Mar 31 '12 at 23:10

2 Good idea but this will not work on IE. $('#the_real_file_input').click() will trigger open dialog but file will not
be selected into a form and upload will fail. Tomas Aug 21 '12 at 12:04

I am able to do it with pure CSS using below code. I have used bootstrap and font-
awesome.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-
bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.css" rel="stylesheet" />

<label class="btn btn-default btn-sm center-block btn-file">

<i class="fa fa-upload fa-2x" aria-hidden="true"></i>
<input type="file" style="display: none;">
</label>

Run code snippet Expand snippet

edited Dec 30 '16 at 8:14 answered Dec 30 '16 at 8:07

Karthik
178 1 12

<input type="file" name="media" style="display-none" onchange="document.media.submit()">

I would normally use simple javascript to customize the file input tag.A hidden input field,on
click of button,javascript call the hidden field,simple solution with out any css or bunch of
jquery.

<button id="file" onclick="$('#file').click()">Upload File</button>

answered Aug 13 '13 at 19:48

user2086641
1,615 5 35 63

you can't use click() method to fire event for input type file. most of the browser doesn't allow for security
reason . Mahi Dec 29 '16 at 9:37

https://stackoverflow.com/questions/572768/styling-an-input-type-file-button Page 8 of 19
html - Styling an input type="file" button - Stack Overflow 5/30/17, 4*48 PM

VISIBILITY:hidden TRICK

I usually go for the visibility:hidden trick

this is my styled button

<div id="uploadbutton" class="btn btn-success btn-block">Upload</div>

this is the input type=file button. Note the visibility:hidden rule

<input type="file" id="upload" style="visibility:hidden;">

this is the JavaScript bit to glue them together. It works

<script>
$('#uploadbutton').click(function(){
$('input[type=file]').click();
});
</script>

edited Oct 16 '16 at 14:58 answered Jun 24 '16 at 23:33

Gianluca Ghettini
3,785 3 22 46

1 you can't use click() method to fire event for input type file. most of the browser doesn't allow for security
reason Mahi Dec 29 '16 at 9:37

even using jquery? is that correct? how would you do it instead? Gianluca Ghettini Dec 29 '16 at 10:42

stackoverflow.com/questions/210643/ Mahi Dec 29 '16 at 17:04

the only way i can think of is to find the button with javascript after it gets rendered and assign
a style to it

you might also look at this writeup

answered Feb 21 '09 at 10:41

roman m
14.9k 23 90 126

Pure CSS, no JavaScript, works in all browsers down to ie7 - awesome! Simon Steinberger Jun 6 '13 at
12:37

Here is a solution which doesn't really style the <input type="file" /> element but instead
uses a <input type="file" /> element on top of other elements (which can be styled). The
<input type="file" /> element is not really visible hence, the overall illusion is of a nicely
styled file upload control.

I came across this problem recently and despite the plethora of answers on Stack Overflow,
none really seemed to fit the bill. In the end, I ended up customizing this so as to have a simple
and an elegant solution.

I have also tested this on Firefox, IE (11, 10 & 9), Chrome and Opera, iPad and a few android
devices.

Here's the JSFiddle link -> http://jsfiddle.net/umhva747/

$('input[type=file]').change(function(e) {
$in = $(this);
$in.next().html($in.val());

});

$('.uploadButton').click(function() {

https://stackoverflow.com/questions/572768/styling-an-input-type-file-button Page 9 of 19
html - Styling an input type="file" button - Stack Overflow 5/30/17, 4*48 PM

var fileName = $("#fileUpload").val();

if (fileName) {
alert(fileName + " can be uploaded.");
}
else {
alert("Please select a file to upload");
}
});

body {
background-color:Black;
}

div.upload {
background-color:#fff;
border: 1px solid #ddd;
border-radius:5px;
display:inline-block;
height: 30px;
padding:3px 40px 3px 3px;
position:relative;
width: auto;
}

div.upload:hover {
opacity:0.95;
}

div.upload input[type="file"] {
display: input-block;
width: 100%;
height: 30px;
opacity: 0;
cursor:pointer;
position:absolute;
left:0;
}
.uploadButton {
background-color: #425F9C;
border: none;
border-radius: 3px;
color: #FFF;
cursor:pointer;
display: inline-block;
height: 30px;
margin-right:15px;
width: auto;
padding:0 20px;
box-sizing: content-box;
}

.fileName {
font-family: Arial;
font-size:14px;
}

.upload + .uploadButton {
height:38px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action="" method="post" enctype="multipart/form-data">
<div class="upload">
<input type="button" class="uploadButton" value="Browse" />
<input type="file" name="upload" accept="image/*" id="fileUpload" />
<span class="fileName">Select file..</span>
</div>
<input type="button" class="uploadButton" value="Upload File" />
</form>

Run code snippet Expand snippet

Hope this helps!!!

answered Jan 30 '15 at 20:35

Satwik Nadkarny
4,032 1 11 29

1 An ingeniously clever solution to this nefarious file upload styling shenanigans. rmcsharry Sep 10 '16 at

https://stackoverflow.com/questions/572768/styling-an-input-type-file-button Page 10 of 19
html - Styling an input type="file" button - Stack Overflow 5/30/17, 4*48 PM

18:26

This week I also needed to custom the button and display the selected file name aside it, so
after reading some of the answers above (Thanks BTW) I came up with the following
implementation:

HTML:

<div class="browse">
<label id="uploadBtn" class="custom-file-upload">Choose file
<input type="file" name="fileInput" id="fileInput" accept=".yaml" ngf-select ngf-
change="onFileSelect($files)" />
</label>
<span>{{fileName}}</span>
</div>

CSS

input[type='file'] {
color: #a1bbd5;
display: none;

.custom-file-upload {
border: 1px solid #a1bbd5;
display: inline-block;
padding: 2px 8px;
cursor: pointer;
}

label{
color: #a1bbd5;
border-radius: 3px;
}

Javascript (Angular)

app.controller('MainCtrl', function($scope) {

$scope.fileName = 'No file chosen';

$scope.onFileSelect = function ($files) {

$scope.selectedFile = $files;
$scope.fileName = $files[0].name;
};
});

Basically I'm working with ng-file-upload lib, Angular-wise I'm binding the filename to my
$scope and giving it the initial value of 'No file chosen', I'm also binding the onFileSelect()
function to my scope so when a file gets selected I'm getting the filename using ng-upload API
and assign it to the $scope.filename.

answered Jul 13 '15 at 9:06

lironn
350 1 3 9

css can do a lot here... with a little trickery...

<div id='wrapper'>
<input type='file' id='browse'>
</div>

#wrapper {
width: 93px; /*play with this value */
height: 28px; /*play with this value */
background: url('browseBtn.png') 0 0 no-repeat;
border:none;
overflow:hidden;
}

#browse{
margin-left:-145px; /*play with this value */
opacity:0; /* set to .5 or something so you can better position it as an overlay then

https://stackoverflow.com/questions/572768/styling-an-input-type-file-button Page 11 of 19
html - Styling an input type="file" button - Stack Overflow 5/30/17, 4*48 PM

back to zero again after you're done */

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}

::reference::http://site-o-matic.net/?viewpost=19

-abbey

answered Jun 20 '12 at 21:16

Abbey
198 2 6

I've found a very easy method to switch the file button to a picture. You just label a picture and
place it on top of the file button.

<html>
<div id="File button">
<div style="position:absolute;">
<!--This is your labeled image-->
<label for="fileButton"><img src="ImageURL"></label>
</div>
<div>
<input type="file" id="fileButton"/>
</div>
</div>
</html>

When clicking on the labeled image, you select the file button.

answered Sep 4 '13 at 7:08

D-Inventor
61 1

ONLY CSS

Use this very simple and EASY

Html:

<label>Attach your screenshort</label>

<input type="file" multiple class="choose">

Css:

.choose::-webkit-file-upload-button {
color: white;
display: inline-block;
background: #1CB6E0;
border: none;
padding: 7px 15px;
font-weight: 700;
border-radius: 3px;
white-space: nowrap;
cursor: pointer;
font-size: 10pt;
}

answered Jun 3 '16 at 13:00

Balvant Ahir
126 1 9

This only works for webkit browsers. Xarcell Sep 7 '16 at 16:34

Here's a simple css only solution, that creates a consistent target area, and lets you style your
faux elements however you like.

The basic idea is this:

https://stackoverflow.com/questions/572768/styling-an-input-type-file-button Page 12 of 19
html - Styling an input type="file" button - Stack Overflow 5/30/17, 4*48 PM

1. Have two "fake" elements (a text input/link) as siblings to your real file input. Absolutely
position them so they're exactly on top of your target area.
2. Wrap your file input with a div. Set overflow to hidden (so the file input doesn't spill out),
and make it exactly the size that you want your target area to be.
3. Set opacity to 0 on the file input so it's hidden but still clickable. Give it a large font size so
the you can click on all portions of the target area.

Here's the jsfiddle: http://jsfiddle.net/gwwar/nFLKU/

<form>
<input id="faux" type="text" placeholder="Upload a file from your computer" />
<a href="#" id="browse">Browse </a>
<div id="wrapper">
<input id="input" size="100" type="file" />
</div>
</form>

answered Mar 2 '13 at 21:46

Kerry Liu
1,632 8 15

A really clever solution using jQuery that works in all older browsers as well as in the new
ones, I found here. It takes care of all the styling and click() problems, using the actual file
browse button. I made a plain javascript version: fiddle The solution is as simple as genius:
make the file-input invisible, and use a piece of code to place it under the mousecursor.

<div class="inp_field_12" onmousemove="file_ho(event,this,1)"><span>browse</span>

<input id="file_1" name="file_1" type="file" value="" onchange="file_ch(1)">
</div>
<div id="result_1" class="result"></div>

function file_ho(e, o, a) {
e = window.event || e;
var x = 0,
y = 0;
if (o.offsetParent) {
do {
x += o.offsetLeft;
y += o.offsetTop;
} while (o = o.offsetParent);
}
var x1 = e.clientX || window.event.clientX;
var y1 = e.clientY || window.event.clientY;
var le = 100 - (x1 - x);
var to = 10 - (y1 - y);
document.getElementById('file_' + a).style.marginRight = le + 'px';
document.getElementById('file_' + a).style.marginTop = -to + 'px';
}

.inp_field_12 {
position:relative;
overflow:hidden;
float: left;
width: 130px;
height: 30px;
background: orange;
}
.inp_field_12 span {
position: absolute;
width: 130px;
font-family:'Calibri', 'Trebuchet MS', sans-serif;
font-size:17px;
line-height:27px;
text-align:center;
color:#555;
}
.inp_field_12 input[type='file'] {
cursor:pointer;
cursor:hand;
position: absolute;
top: 0px;
right: 0px;
-moz-opacity:0;
filter:alpha(opacity: 0);
opacity: 0;
outline: none;

https://stackoverflow.com/questions/572768/styling-an-input-type-file-button Page 13 of 19
html - Styling an input type="file" button - Stack Overflow 5/30/17, 4*48 PM

outline-style:none;
outline-width:0;
ie-dummy: expression(this.hideFocus=true);
}
.inp_field_12:hover {
background-position:-140px -35px;
}
.inp_field_12:hover span {
color:#fff;
}

edited May 23 at 12:34 answered Apr 18 '13 at 12:44

Community Michel
1 1 1,722 1 16 24

In case you're looking for a javascript library - out of the box solution, jquery-fileinput
works fine.

answered Nov 25 '13 at 21:15

ellimilial
665 6 16

Update Nevermind, this doesn't work in IE or it's new brother, FF. Works on every other type of
element as expected, but doesn't work on file inputs. A much better way to do this is to just
create a file input and a label that links to it. Make the file input display none and boom, it
works in IE9+ seamlessly.

Warning: Everything below this is crap!

By using pseudo elements positioned/sized against their container, we can get by with only
one input file (no additional markup needed), and style as per usual.

Demo

<input type="file" class="foo">

.foo {
display: block;
position: relative;
width: 300px;
margin: auto;
cursor: pointer;
border: 0;
height: 60px;
border-radius: 5px;
outline: 0;
}
.foo:hover:after {
background: #5978f8;
}
.foo:after {
transition: 200ms all ease;
border-bottom: 3px solid rgba(0,0,0,.2);
background: #3c5ff4;
text-shadow: 0 2px 0 rgba(0,0,0,.2);
color: #fff;
font-size: 20px;
text-align: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
content: 'Upload Something';
line-height: 60px;
border-radius: 5px;
}

Enjoy guys!

Old Update

https://stackoverflow.com/questions/572768/styling-an-input-type-file-button Page 14 of 19
html - Styling an input type="file" button - Stack Overflow 5/30/17, 4*48 PM

Turned this into a Stylus mixin. Should be easy enough for one of you cool SCSS cats to
convert it.

file-button(button_width = 150px)
display block
position relative
margin auto
cursor pointer
border 0
height 0
width 0
outline none
&:after
position absolute
top 0
text-align center
display block
width button_width
left -(button_width / 2)

Usage:

<input type="file">

input[type="file"]
file-button(200px)

edited Dec 26 '13 at 16:07 answered Dec 24 '13 at 19:32

corysimmons
1,624 16 21

As JGuo and CorySimmons mentioned, you can use the clickable behaviour of a stylable label,
hiding the less flexible file input element.

<!DOCTYPE html>
<html>
<head>
<title>Custom file input</title>
<link rel="stylesheet"
href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>

<body>

<label for="upload-file" class="btn btn-info"> Choose file... </label>

<input id="upload-file" type="file" style="display: none"
onchange="this.nextElementSibling.textContent = this.previousElementSibling.title =
this.files[0].name">
<div></div>

</body>
</html>

edited May 23 at 12:02 answered Feb 25 '14 at 19:24

Community KitKat
1 1 950 8 13

Here is a solution, that also shows the chosen file name: http://jsfiddle.net/raft9pg0/1/

HTML:

<label for="file-upload" class="custom-file-upload">Chose file</label>

<input id="file-upload" type="file"/>
File: <span id="file-upload-value">-</span>

JS:

$(function() {
$("input:file[id=file-upload]").change(function() {
$("#file-upload-value").html( $(this).val() );
});
});

https://stackoverflow.com/questions/572768/styling-an-input-type-file-button Page 15 of 19
html - Styling an input type="file" button - Stack Overflow 5/30/17, 4*48 PM

CSS:

input[type="file"] {
display: none;
}

.custom-file-upload {
background: #ddd;
border: 1px solid #aaa;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
color: #444;
display: inline-block;
font-size: 11px;
font-weight: bold;
text-decoration: none;
text-shadow: 0 1px rgba(255, 255, 255, .75);
cursor: pointer;
margin-bottom: 20px;
line-height: normal;
padding: 8px 10px; }

answered Oct 15 '14 at 12:15

Caleb
76 2

Thanks for sharing, works flawlessly. W.M. May 13 at 10:33

These answers are nice, and they all work for very specific use cases. That is to say, they are
opinionated.

So, here's an answer that assumes nothing, but will work no matter how you modify it. You can
change design with css, add javascript to maybe show a file name on change, etc. it will still
always work.

Code:

Here is the core css

.file-input{
pointer-events: none;
position: relative;
overflow: hidden;
}
.file-input > * {
pointer-events: none;
}
.file-input > input[type="file"]{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
pointer-events: all;
cursor: pointer;
height: 100%;
width: 100%;
}

and the core html:

<div class="file-input">
<input type="file"/>
</div>

As you can see, we are forcing any pointer event(click) that happens on the .file-input element,
or any of its children, to be proxied to the file input. This is because the file input is positioned
absolute and will consume the width/height of the container always. You can therefore
customize to fit your need. style the wrapper into a button, use some js to display file name on
select, etc. nothing will break so long as the above core code remains intact.

https://stackoverflow.com/questions/572768/styling-an-input-type-file-button Page 16 of 19
html - Styling an input type="file" button - Stack Overflow 5/30/17, 4*48 PM

As you will see in the demo, i have added a span with text "Select file" and a class with extra
styles to style the .file-input div. This should be the canonical starting point for anyone
intending to create a custom file upload element.

Demo:JSFIDDLE

answered Apr 4 at 22:16

r3wt
2,167 14 38

jquery version of teshguru script for automatically detect input[file] and style

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<style>
#yourBtn{
position: relative;
top: 150px;
font-family: calibri;
width: 150px;
padding: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border: 1px dashed #BBB;
text-align: center;
background-color: #DDD;
cursor:pointer;
}
</style>
<script type="text/javascript">
$(document).ready(function()
{
$('input[type=file]').each(function()
{
$(this).attr('onchange',"sub(this)");
$('<div id="yourBtn" onclick="getFile()">click to upload a
file</div>').insertBefore(this);
$(this).wrapAll('<div style="height: 0px;width: 0px; overflow:hidden;"></div>');
});
});
function getFile(){
$('input[type=file]').click();
}
function sub(obj){
var file = obj.value;
var fileName = file.split("\\");
document.getElementById("yourBtn").innerHTML = fileName[fileName.length-1];
}
</script>
</head>
<body>
<?php
var_dump($_FILES);
?>
<center>
<form action="" method="post" enctype="multipart/form-data" name="myForm">

<input id="upfile" name="file" type="file" value="upload"/>

<input type="submit" value='submit' >
</form>
</center>
</body>
</html>

answered Jan 9 '13 at 5:44

h0mayun
2,381 19 31

A nice easy way to style file input

http://www.appelsiini.net/projects/file
style

answered Jan 24 '13 at 10:15

https://stackoverflow.com/questions/572768/styling-an-input-type-file-button Page 17 of 19
html - Styling an input type="file" button - Stack Overflow 5/30/17, 4*48 PM

Mihir Bhatt
1,167 2 13 29

Plug-in solutions I found were too heavy-weight, so, I made my own jQuery plug-in called
Drolex FileStyle.

This plug-in allows you to style file input fields however you want. Actually, you style div
elements to look like a tricked out file input, and the actual file input is automatically overlaid
with 0% opacity. No additional HTML is required. Just include the css and js files in the page
you want Drolex FileStyle and that's it! Edit the css file to your liking. Don't forget the jQuery
library if your page doesn't already have it. If the client does not run JavaScript, then the file
input will not be modified by js or css.

Tested to work in Chrome 24, Firefox 18, Internet Explorer 9. Expected to work in previous
versions of those and others.

Download: http://web.drolex.net/Drolex-FileStyle.zip

answered Feb 3 '13 at 11:12

drolex
2,157 1 11 12

Here's a cross compatible method which will work in Chrome, Firefox, Safari, and IE.

$(window).on('resize',function() {
var eqw = $('input[type=text]').width();
$('textarea').width(eqw - 32);
$('.fileoutline').width(eqw);
}).trigger('resize');

$('.file+.file').hide();

$(".file").click(function() {
var input = $(this).next().find('input');
input.click();
});
$("input[id='file1']").change(function () {
$('.file+.file').show();
var filename = $(this).val();
$('.filename1').html(filename);
$('.file').find('span').html('CHANGE FILE');
});
$("input[id='file2']").change(function() {
var filename = $(this).val();
$('.filename2').html(filename);
$('.file').find('span').html('CHANGE FILE');
});

form { width:55%;margin:0 auto;padding-left:3vw;text-align:left; }

fieldset{border:0;margin:0;padding:0;}
textarea{overflow:
auto;height:25vh;resize:none;outline:none;width:93%;background:none;padding:8px
15px;display:block;text-align:left;border:1px solid #000;margin:0;color:#000;font:700
0.85em/2.2 'Futura Book',Arial,sans-serif;}
input:focus{outline:none;}
input[type=text]{font-weight:700;font-size:0.85em;line-height:2.2;background:none;text-
align:left;letter-spacing:0.02em;height:33px;display:block;width:100%;border:none;border-
bottom:1px solid #000;margin:0 0 28px;color:#000;}
input:focus{outline:0;}
.fileoutline { width:100%;margin:25px auto 0px;left:0;right:0;height:40px;border:1px solid
#000;position:relative; }
input[type=file] { -webkit-appearance: none;-moz-appearance:none;appearance:
none;opacity:0;position:relative;width:100%;height:35px;font-weight:700;font-
size:0.5em;line-height:28px;letter-spacing:0.2em;position: absolute;left: 0;top: 0;height:
100%;z-index:10; }
.file,.filename1,.filename2,#submit { font-size:10px;letter-spacing:0.02em;text-
transform:uppercase;color:#ffffff;text-align:center;width:35%;}
.file,.filename1,.filename2 { font-weight:200;line-height:28px;}
.filename1,.filename2 { width:375px;overflow:hidden;top:0;text-
align:right;position:absolute;display:block;height:26px;color:#000;}
.file { position:absolute;width:100px;top:6px;left:10px;background:#000;border-
radius:14px; }
::-webkit-file-upload-button,::-ms-browse { width: 100%;height:25px;opacity: 0;-webkit-

https://stackoverflow.com/questions/572768/styling-an-input-type-file-button Page 18 of 19
html - Styling an input type="file" button - Stack Overflow 5/30/17, 4*48 PM

appearance: none;appearance: none; }

#submit{border:none;height:32px;background: #000;box-shadow:0 0 0 0.5px #fff,0 0 0 5px
#000;margin:35px 0;float:right;display:block;}

<form action="" method="post" enctype="multipart/form-data">

<input type="text" name="email" id="email" placeholder="Email address" />
<input type="text" type="text" name="name" id="title" placeholder="Name" />
<textarea rows="7" cols="40" name="description" id="description"
placeholder="Description"></textarea>
<div class="fileoutline"><div class="file"><span>CHOOSE FILE</span><input type="file"
name="file[]" id="file1"><div class="filename1">NO CHOSEN FILE</div></div></div>
<div class="fileoutline"><div class="file"><span>CHOOSE FILE</span><input type="file"
name="file[]" id="file2"><div class="filename2">NO CHOSEN FILE</div></div></div>
<input type="submit" name="submit" value="Submit" id="submit">
</form>

Run code snippet Expand snippet

answered Dec 4 '14 at 2:46

davidcondrey
15k 4 58 93

The best way is using the pseudo element :after or :before as an element overt the de input.
Then style that pseudo element as you wish. I recomend you to do as a general style for all
input files as follows:

input[type="file"]:before {
content: 'Browse';
background: #FFF;
width: 100%;
height: 35px;
display: block;
text-align: left;
position: relative;
margin: 0;
margin: 0 5px;
left: -6px;
border: 1px solid #E0E0E0;
top: -1px;
line-height: 35px;
color: #B6B6B6;
padding-left: 5px;
display: block;
}

answered Jan 8 '15 at 0:53

Despertaweb
434 6 17

1 2 next

protected by Josh Crozier Oct 15 '14 at 23:20

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation
on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

https://stackoverflow.com/questions/572768/styling-an-input-type-file-button Page 19 of 19