Adding style to file upload button in css
I tried this it looks pretty good to me. Are there any flaws with this? Here is the jsfiddle link http://jsfiddle.net/Tdkre/1/
#FileUpload {
position:relative;
}
#BrowserVisible {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
background:url(upload.png) 100% 1px no-repeat;
width:345px;
height:30px;
}
#FileField {
width:250px;
margin-right:85px;
padding: 6px;
font-size: 13px;
background: #fff url('bg-form-field.gif') top left repeat-x;
border: 1px solid #d5d5d5;
color: #333;
border-radius: 4px 4px 4px 4px !important;
}
#BrowserHidden {
position:relative;
width:345px;
height:30px;
text-align: right;
-moz-opacity:0;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
<div id="FileUpload">
<input type="file" size="24" id="BrowserHidden" onchange="getElementById('FileField').value = getElementById('BrowserHidden').value;" />
<div id="BrowserVisible"><input type="text" id="FileField" /></div>
Here are the images
You could also use jQuery, like this:
<img id="image" style="cursor:pointer;" src="img.jpg" />
<input type='file' style="display:none;" name="photosubmit" id="photosubmit"/>
And this jquery code
$("#image").click(function(){
$("#photosubmit").click();
});
Hopes this helps someone too!
Try this solution: http://jsfiddle.net/JJRrc/1/
Html
<p class="form">
<input type="text" id="path" />
<label class="add-photo-btn">upload
<span>
<input type="file" id="myfile" name="myfile" />
</span>
</label>
</p>
CSS
.form input[type="file"]{
z-index: 999;
line-height: 0;
font-size: 50px;
position: absolute;
opacity: 0;
filter: alpha(opacity = 0);-ms-filter: "alpha(opacity=0)";
cursor: pointer;
_cursor: hand;
margin: 0;
padding:0;
left:0;
}
.add-photo-btn{
position:relative;
overflow:hidden;
cursor:pointer;
text-align:center;
background-color:#83b81a;
color:#fff;
display:block;
width:197px;
height:31px;
font-size:18px;
line-height:30px;
float:left;
}
input[type="text"]{
float:left;
}
JQuery
$('#myfile').change(function(){
$('#path').val($(this).val());
});
try this:
In your css file put this on the end of file or somewhere else: input[type="file"]::-webkit-file-upload-button
.
This syntax is only for button style.
If you put there only: input[type="file"]
you can style the array where you have filename.