4

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?

Pratik Joshi
  • 11,485
  • 7
  • 41
  • 73
Juicy
  • 11,840
  • 35
  • 123
  • 212

5 Answers5

5

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

urbz
  • 2,663
  • 1
  • 19
  • 29
  • It's the simplest solution and I like that it's only CSS, unfortunately you can't see the text with the name of the selected file anymore. – Juicy Jun 16 '14 at 07:15
  • Yes that is true. Unfortunately, the text is bounded to the button element of the `input`. – urbz Jun 16 '14 at 07:19
3

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

Manwal
  • 23,450
  • 12
  • 63
  • 93
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

Jai
  • 74,255
  • 12
  • 74
  • 103
1
<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/

RGS
  • 5,131
  • 6
  • 37
  • 65
0

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

moonworker
  • 11
  • 4