When using this HTML code:
You get a rectangle where the location is stored, and a button labelled "Browse..".
I would like to redesign the "Browse.." button and I was told this would have to be done using mainly javascript and abit of css (I thought it would be the other way around only abit of javascript and alot of css - which im prefering).
So any ideas how to redesign the "Browse.." button?
Note: The file is a php file which contains various input type="submit", etc.
Thanks, Regards X
The only way I know of is to use a workaround...This website has the best solution I've come across...Just follow the steps, and be sure to download the scripts he has written at the bottom of the page.
http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
I know this is a problem that very vew people have figured out a way around, but the one you mentioned above dosent allow you to view the file you have uploaded (Eg. D:\Programs\hi.jpg).
Im just trying to figure out using some CSS and minor Javascript can maybe come up with something?
Thanks for the heads up in the right direction though.
a little bit of googling and I came across this one on quirksmode...this seems to be about the same approach as the previous, but with a textbox to show the chosen file...both of these solutions are merely browser 'workarounds', and since they use opacity, cross-browser compatibility can be difficult to achieve!
Let me know if you come across something better and/or hack out your own solution, as this has always been the bane of elegant form design...
I have found an easy way to achieve this:
http://tiagoe.blogspot.com/2010/01/css-style-typefile-tags.html
Yep... nice thing... but these guys are hiding the real thing with javascript...
You don't need any javascript attached to you page for that thing to work :)).
here a quick example:
in the header a small stylesheet:
<style>
label.LabelHolder input.file{
position: relative;
height: 100%;
width: auto;
opacity: 0;
-moz-opacity: 0;
filter:progid : DXImageTransform.Microsoft.Alpha(opacity=0);
left:-152px;top:0px;
}
label.LabelHolder{
width: 79px;height: 22px;
background: url(YourGifImageButton.gif) no-repeat;
display: block;
overflow: hidden;
cursor: pointer;
}
</style>Than a small form with 2 elements :
<form method='post' action='YourLocation.php' enctype='multipart/form-data'>
<label class='LabelHolder'>
<input type='file' class='file' name='UploadInput'>
</label>
</form>And that's it!
when adding the relative path to YourGifImageButton.gif and of course have that image saved there everything works perfect!
those guys are hard codding into (label.LabelHolder) the relative position of file element to top:0;left:0 and then overwrite that via javascript with the right values:
original style (as seen in the site)
background: url(YourGifImageButton.gif) 0 0 no-repeat;the result of javascript interraction:
<input type='file' class='file' name='UploadInput' style='left:-152px;top:0px;'>So basically i took the javascript's "advice" and and put it in the stylesheet where it belongs (label.LabelHolder input.file);
The result is a nice looking upload button javascript free.
cheers,
cos
I've built this jQuery plugin to make it much easier to style the file inputs:
http://jstnjns.com/jquery/file/
It's based on the methods above, but much simpler to implement. Hope that helps!
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.