Cross-Browser Custom Styling For File Upload Button

Cross-browser custom styling for file upload button

I'm posting this because (to my surprise) there was no other place I could find that recommended this.

There's a really easy way to do this, without restricting you to browser-defined input dimensions. Just use the <label> tag around a hidden file upload button. This allows for even more freedom in styling than the styling allowed via webkit's built-in styling[1].

The label tag was made for the exact purpose of directing any click events on it to the child inputs[2], so using that, you won't require any JavaScript to direct the click event to the input button for you anymore. You'd to use something like the following:

label.myLabel input[type="file"] {    position:absolute;    top: -1000px;}
/***** Example custom styling *****/.myLabel { border: 2px solid #AAA; border-radius: 4px; padding: 2px 5px; margin: 2px; background: #DDD; display: inline-block;}.myLabel:hover { background: #CCC;}.myLabel:active { background: #CCF;}.myLabel :invalid + span { color: #A44;}.myLabel :valid + span { color: #4A4;}
<label class="myLabel">    <input type="file" required/>    <span>My Label</span></label>

Custom, cross-browser file upload button

I've made this one few weeks ago. Hope it helps.

Codepen : http://codepen.io/mbrillaud/pen/dPdKOG

HTML:

<div class="wrapper">
<h1>Stylized file input</h1>
<label class="mybutton" for="fileupload">Button</label>
<input class="fileupload" id="fileupload" type="file"/>
<p id="fileinfo"><span></span></p>
</div>

SCSS:

$wetAsphalt: #34495e;
$pumpkin: #d35400;
$clouds: #ecf0f1;
$width: 300px;

body{
font-family: arial, sans-serif;
background-color: $wetAsphalt;
}

.wrapper{
width: $width;
padding: 12px;
background-color: $clouds;
margin: 0 auto;
@include border-radius(5px);

.fileupload{
visibility: hidden;
}
.mybutton{
display: block;
width: 100px;
text-align: center;
margin: 0 auto;
border-radius: 2px;
padding: 6px;
background-color: $pumpkin;
font-size: 32px;
color: white;
cursor: pointer;
@include user-select(none);
}

#fileinfo{
height: 20px;
text-align: center;
}
}

JS (just to get the input value) :

$('#fileupload').on('change', function(){
$('#fileinfo').text($(this).val());
});

Styling an input type=file button

Styling file inputs are 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.

UPDATE

Although it's difficult to style an <input> tag directly, this is easily possible with the help of a <label> tag. See answer below from @JoshCrozier: https://stackoverflow.com/a/25825731/10128619

How to customize input type=file?

You can’t modify much about the input[type=file] control itself.

Since clicking a label element correctly paired with an input will activate/focus it, we can use a label to trigger the OS browse dialog.

Here is how you can do it…

label {   cursor: pointer;   /* Style as you please, it will become the visible UI component. */}
#upload-photo { opacity: 0; position: absolute; z-index: -1;}
<label for="upload-photo">Browse...</label><input type="file" name="photo" id="upload-photo" />

Is there a way to make the native `browse` button on a file input larger cross browser?

font-size:70px;

http://jsfiddle.net/rH5SY/9/

CSS - file upload/select button - different in IE, Firefox, Opera

in every browser my file upload input looks different. I tried IE, FF
and Opera. Why is this happening?

Because the file upload is rendered by client machine's operating system, not HTML.

A file input button for all browsers, is this possible?

I can't remember the source of the technique but this seems to be cross-browser. Tested in:

  • Google Chrome 9
  • FireFox 3.6
  • Internet Explorer 6-9
  • Opera 10
  • Safari for Windows

Here is the complete code:

HTML:


<div>
<button><!-- this is skinnable -->Pick a file ...</button>
<input type="file" />
</div>

CSS:


div
{
position:relative;
width: 100px;
height: 30px;
overflow:hidden;
}

div button
{
position: absolute;
width: 100%;
height: 100%;
}

div input
{
font: 500px monospace; /* make the input's button HUGE */
opacity:0; /* this will make it transparent */
filter: alpha(opacity=0); /* transparency for Internet Explorer */
position: absolute; /* making it absolute with z-index:1 will place it on top of the button */
z-index: 1;
top:0;
right:0;
padding:0;
margin: 0;
}

The idea is to make the <input type="file" /> transparent and place it on top of some style-able content (a <button> in this case). When the end user clicks the button she will actually click the <input type="file" />.



Related Topics



Leave a reply



Submit