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 ).

Answer 3

May be you want something like this:

Html:

<div id='file'>
   <label id='text'for="inputFile1">No file selected.</label>
   <label for="inputFile1">
       <input type="file" id='inputFile1' class='fileInput'/>
   </label>
</div>

css:

input[type="file"] {
    opacity:0;
}
#file {
    background:url('...der_open-add.png') 0 0 no-repeat;
    width:100%;
    height:32px;
    position:relative;
    overflow:hidden;
}
#file label {
    padding:0 0 0 35px;
    color:green;
    width:100%;
}
#file #text {
    line-height:32px;
    width:100%;
    position:absolute;
    left:0px;
    top:0;
    color:green;
    font-size:11px;
}

and jQuery:

$('#file input[type="file"]').on('change', function () {
    var o = this.value || 'No file selected.';
    $(this).closest('#file').find('#text').text(o);
});

---

Fiddle

Answer 4

<div style="position:relative;display:inline-block;left:-4px;bottom:-6px;width:16px;  height: 24px;overflow:hidden;">
<img src="/images/attach.jpg" alt="" title="Add Attachment" style="height:24px;width:16px; position: relative;top: 1px; left: 0px;"/>
<input type="file" id="fileupload" name="upload" style=" opacity: 0;font-size: 50px;width:16px; filter:alpha(opacity: 0);  position: relative; top: -22px; left: -1px" />
</div>

http://jsfiddle.net/k6zBQ/2/

Answer 5

My simple solution: Put the input button in a div with css display:none Make your button anyway you want and bind a function that trigger the invisible input button.

<div style="display: none;">
    <form id="fileupload">
        <input type="file" class="upload" name="newfile"/>
    </form>
</div>

<span id="browser">Click this line to browse all your awesome files</span>

JQUERY:
$("#browser").on('click', function(){
    $(".upload").click();       
});

Fiddle