Hi,
I am using a file selector like so:
<form id = "form">
<input type="file" name="selectafile" />
</form>
This gives me a text entry box and a 'Browse' button. I was wondering if anyone could tell me how I could apply styling to the browse button because I have lots of custom buttons on the page and the browser standard looks totally out of place in there.You could use an image as a button instead if you wish.
<img src=http://www.webdeveloper.com/forum/archive/index.php/"submitbuttonsource" onclick="document.form.submit()">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"resetbuttonsource" onclick="document.form.reset()">
HavikOne way round this is to use an image input and then position it over the Browse button.
You will have to include
onclick="this.form.elementName.click();return false"
in the div
elementName= the name of the file input
Example: viewed in IE5.5 at 800x600
Change the image to your own
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
</HEAD>
<BODY>
<form name="f1">
<input type="file" name="myfile">
<INPUT type="image" src=http://www.webdeveloper.com/forum/archive/index.php/"pic1.jpg" style="position:absolute; left:164; top:15; width:82; height:23; background-color:blue" onclick="this.form.myfile.click();return false">
</form>
</BODY>
</HTML>
I am using a file selector like so:
<form id = "form">
<input type="file" name="selectafile" />
</form>
This gives me a text entry box and a 'Browse' button. I was wondering if anyone could tell me how I could apply styling to the browse button because I have lots of custom buttons on the page and the browser standard looks totally out of place in there.You could use an image as a button instead if you wish.
<img src=http://www.webdeveloper.com/forum/archive/index.php/"submitbuttonsource" onclick="document.form.submit()">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"resetbuttonsource" onclick="document.form.reset()">
HavikOne way round this is to use an image input and then position it over the Browse button.
You will have to include
onclick="this.form.elementName.click();return false"
in the div
elementName= the name of the file input
Example: viewed in IE5.5 at 800x600
Change the image to your own
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
</HEAD>
<BODY>
<form name="f1">
<input type="file" name="myfile">
<INPUT type="image" src=http://www.webdeveloper.com/forum/archive/index.php/"pic1.jpg" style="position:absolute; left:164; top:15; width:82; height:23; background-color:blue" onclick="this.form.myfile.click();return false">
</form>
</BODY>
</HTML>