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?
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:
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);
}
Note: I have used Bootstrap for styling button (div.file-upload).
bootstarp as optional.May be you want something like this:
<div id='file'>
<label id='text'for="inputFile1">No file selected.</label>
<label for="inputFile1">
<input type="file" id='inputFile1' class='fileInput'/>
</label>
</div>
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;
}
$('#file input[type="file"]').on('change', function () {
var o = this.value || 'No file selected.';
$(this).closest('#file').find('#text').text(o);
});
<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:
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();
});
