can you change the look of the 'Browse..' button? 1

[aarontra]

Can I can the look of the 'Browse..' button that comes with the file input form field?


<form action=&quot;#ThisPageName#&quot; ENCTYPE=&quot;multipart/form-data&quot; METHOD=&quot;post&quot;>
<input type=&quot;file&quot; Name=&quot;BannerGIF&quot; Value=&quot;#BannerGIF#&quot; size=&quot;60&quot;>
<input type=&quot;submit&quot; value=&quot;Upload&quot;>
</form>

Thank you
Aaron

 

[ecobb]

You can make some changes to the look of the button using style sheets, but as far as replacing the button with an image or something like that, I don't think so.

Hope this Helps

 

[aarontra]

I could only change the border of the 'Browse..' button:

<input type=&quot;file&quot; Name=&quot;BannerGIF&quot; style= &quot;border: 1px solid #greenhex#;&quot; size=&quot;50&quot; >

And it changes the border to the file input form field and the 'Browse..' button.

Aaron

 

[ecobb]

You might could try something like this:

<style type=&quot;text/css&quot;>
.altButtonFormat {
background-color: #e9e9e9;
font-family: tahoma;
border: 1px solid black;
font-size: 11px;
color: Black;
}
</style>

<input type=&quot;file&quot; Name=&quot;BannerGIF&quot; class=&quot;altButtonFormat&quot; size=&quot;50&quot; >

I'm not sure about a Browse button, but I've done stuff like this with regular Submit buttons. It still doesn't offer many features, but it may be enough to do what you want.

Hope this helps!

 

[Wullie]

Hi mate,

You can use an image for the button but you need to use a workaround to do it.

 <input type=file
               name='file1'
               size='15'
               style='display: none;'>
        <br>
        
        <input type='text'
               name='file2'
               id='file2'>
        
        <img src='images/browse-up.gif'
             name='brower'
             id='brower'
             width='83' height='24' border='0'
             alt=''
             align='absmiddle'
             onclick='document.all.file1.click(); 
                       
document.all.file2.value=document.all.file1.value'
             onMouseDown='this.src=&quot;images/browse-dn.gif&quot;'
             onMouseUp='this.src=&quot;images/browse-up.gif&quot;'
             onMouseOut='this.src=&quot;images/browse-up.gif&quot;'>

Hope this helps

Wullie

http://www.necomputers.org.uk

http://www.freshlookdesign.co.uk

http://www.freshlookdesign.com

http://www.whiland.co.uk

The pessimist complains about the wind. The optimist expects it to change.
The leader adjusts the sails. - John Maxwell

 

[aarontra]

Thank you all.

I can figure out to what Wullie suggested.

When I press the 'brower' button it works.
Then when I press the 'Upload' button, it does not submit the form, it clears 'file1'.
Then when I click it again it submits the form, but of course 'file1' is empty!

I took out (style='display: none;') from 'file1' to see what is happening. Since I had to press 'Upload' twice to get the form to submit.

<form action=&quot;#ThisPageName#&quot; ENCTYPE=&quot;multipart/form-data&quot; METHOD=&quot;post&quot;>




<b>Banner GIF or JPEG</b><input type=file name='file1' size='15' >
<br>

<input type='text'
name='file2'
id='file2'>

<img src='images/browse_button.gif'
name='brower'
id='brower'
width='45' height='15' border='0'
alt=''
align='absmiddle'
onclick='document.all.file1.click();

document.all.file2.value=document.all.file1.value;'
><input type=&quot;submit&quot; value=&quot;Upload&quot; name=&quot;Upload&quot; >

</form>


Thank you
Aaron