File Input Button Style with jQuery-UI

Question

I'm using jQuery UI and I notice that the Input File button:

<input type="file">

can't be styled like other buttons. I found this plugin which looks cool and apparently allows you to put an image instead of the button, but the examples don't show any button styling.

If there's no jQuery to apply the theme style to that button, can I style it myself in CSS?

Answer 1

Yes you can, with only CSS.

Make a <form>, wrap a <div> inside it & put your <input type="file"> in the <div>.

To override the default styling of the <input type="file">, the main priority is to set the opacity: 0; on the input so that the styling comes from the <div> css.

---

UPDATE:

To get the text from the <input type="file"> you need a bit of jQuery.

For example, add a paragraph. Then get the text from the input using val() and set it as the paragraphs text. Updated Fiddle:

---

Fiddle demo

Answer 2

A simple solution:

Markup:

<div class="fileUpload btn btn-primary">
    <span>Upload</span>
    <input type="file" class="upload" />
</div>

Css:

.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

Demo

Note: I have used Bootstrap for styling button (div.file-upload).