Image as browse button. Is this possible?

[SPYDERIX]

Hi,

<input type=&quot;file&quot; name=&quot;new_file&quot;>

I want the browse button to be an image. Is there anyway to do this that is compatible, in either HTML or CSS???

Thanks

NATE

http://www.mainframe-webdesign.com

Got a question? Search G O O G L E for links to the fastest answers: www.google.com

 

[deecee]

honestly the javascript forum would help better

<Signature>
Sometimes the Answer You Are LOOKING for can be FOUND BY SEARCHING THE FAQ'S @&%$*#!!!
</Signature>

 

[RedRobotHero]

Do you just mean

<input type='image'>

What do you mean by 'browse button?'

 

[SPYDERIX]

RedRobotHero,

No I mean <input type=&quot;file&quot;>

That is the form element for when you want someone to upload a file. That one piece of code creates both a text box with the local file path and a Browse... button. You click the browse button and that opens a dialog box for you to search and select a file to be uploaded.

I want to change the browse button into an image though and I need it to work in all browsers.

Thanks

NATE

http://www.mainframe-webdesign.com

Got a question? Search G O O G L E for links to the fastest answers: www.google.com

 

[Vragabond]

I am afraid that is not possible. There is a possibility to hide this input box and have an image which, when clicked, simulates the clicking of Browse... button. Then have another input text box where the information is displayed. This involves some javascript and I am almost certain it won't work at least in Mozilla.

 

[Mr3Putt]

Vragabond is right... here's some code that'll (mostly) do that...

<img style=&quot;cursor:hand;&quot; src=&quot;/images/btn.gif&quot; onclick=&quot;document.getElementById('bLtr').click();document.getElementById('sLtrVal').value=document.getElementById('bLtr').value;&quot;>

<input type=&quot;file&quot; name=&quot;bLTR&quot; id=&quot;bLTR&quot; style=&quot;display:none;&quot;>

<input type=&quot;text&quot; name=&quot;sLtrVal&quot; id=&quot;sLtrVal&quot; size=&quot;40&quot; value tabindex=&quot;-1&quot; onfocus=&quot;blur();&quot;>