CSS:.button {
width: 193px; /* size knock */
height: 62px;
margin: 14px 0px;
background: url(img/0309input.jpg);
overflow: hidden; /* will help avoid the output fields for the button border */
position: relative; /* relative to this unit will be to position the box */
}
.button input {
height: 200px;
position: absolute; /* for easy positioning of the field */
top: 0; /* initial coordinates */
right: 0;
opacity: 0; /* make the box itself transparent to show the background of the button */
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
cursor: pointer;
font-size: 200px;
z-index: 5;
}
#filename {
z-index: 3;
position: absolute;
top: 6px;
left: 6px;
width: 184px;
height: 19px;
overflow: hidden;
}
HTML:Download new:
jQuery:$(document).ready(function(){
$("#photo").change(function() {
$("#filename").text($("#photo").val());
});
});
Ubuntu 10.04The result in Opera 10.61
The result in Chrome
The result in Firefox
Actually a question: CHANT & WTF?
What is this C:\\fakepath and where does it come from? The usual, not stylized, file input Opera display correct the full path from the root...
UPD:Just checked on computers with Win7, WinXP, same thing.
UPD 2:Have done so:
function str_replace(search, replace, subject) {
return subject.split(search).join(replace);
}
$("#photo").change(function() {
var newpath = str_replace("C:\\\\fakepath\\\\", ", $("#photo").val());
$("#filename").text(newpath);
});
Works.
However, shocked by the presence of such "security trimmings" or such a "compatibility tool", whatever. I don't remember how many sites have used this method of styling the input... it's now on them everywhere fakepath? Hmm...