How to Make The Native 'Browse' Button on a File Input Larger Cross Browser

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/

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>

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" />.

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

Styling an input type=file

I think I found two solutions to your problem. You are using: filter:alpha(opacity: 0)
on your .file class, thus hiding the actual "Browse..." button you usually see in upload controls.

The first solution would be to use a conditional to set the CSS that will replace your fancy "Select" image with the normal yet styled "Browse" button when the user is using IE.

The second one would be to play with the size of the FileAttachment input and so the hidden "Browse..." button would fit in the position of the "Select" image. From there you just have to make sure that the z-index property of the button is higher than the one of the image.

Let me know if these solutions solve your needs.

:D

Setting uniform input type=file width in all browsers

• Hide the actual control
• Made a DIV with the controls and styling you want on top of it

The button is not a standard HTML control.

See: http://www.quirksmode.org/dom/inputfile.html

Resize the input type=file browse button in firefox?

Styling file input buttons is very limited for security reasons. There are some workarounds, but none are perfect. Check out this post on QuirksMode:

http://www.quirksmode.org/dom/inputfile.html

Labeling file upload button

Pure CSS solution:

.inputfile {  /* visibility: hidden etc. wont work */  width: 0.1px;  height: 0.1px;  opacity: 0;  overflow: hidden;  position: absolute;  z-index: -1;}.inputfile:focus + label {  /* keyboard navigation */  outline: 1px dotted #000;  outline: -webkit-focus-ring-color auto 5px;}.inputfile + label * {  pointer-events: none;}

<input type="file" name="file" id="file" class="inputfile"><label for="file">Choose a file (Click me)</label>

---

Related Topics