Adding Style to standard input type button [Archive]

Click to See Complete Forum and Search --> : Adding Style to standard input type button

jovialjonny

06-10-2003, 01:54 PM

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.

havik

06-11-2003, 12:17 AM

You could use an image as a button instead if you wish.

<img src="submitbuttonsource" onclick="document.form.submit()">

<img src="resetbuttonsource" onclick="document.form.reset()">

Havik

Mr J

06-11-2003, 01:29 PM

One 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="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>