File input button style with jQuery-UI

Question

I am using jQuery UI and I notice that the "Input file" button:

<input type="file">

cannot be styled like other buttons. I found this plugin that looks cool and apparently allows you to place an image instead of a button, but the button style is not shown in the examples.

If there is no jQuery to apply a theme style to this button, can I create it myself in CSS?

Answer 1

Yes, you can only use CSS.

Do <form>, wrap <div>inside it and place <input type="file">in <div>.

<input type="file">, opacity: 0; , <div> css.

---

UPDATE:

<input type="file">, jQuery.

, . val() . :

---

Answer 2

:

:

<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);
}

: Bootstrap (div.file-upload).

Answer 3

, - :

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;
}

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>

Demo:

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

Answer 5

My simple solution: Put the enter button in a div with the display css: none Make your button anyway and attach a function that launches an invisible enter 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