File Form Field and Style Sheets

[thegentleman]

I have a form for uploading images using the file field type:

<input type=&quot;file&quot; name=&quot;image&quot; size=&quot;45&quot; class=&quot;form&quot;>

This creates a text field with a standard &quot;Browse..&quot; button on the end for selecting a file.

Is there any way you can edit the look of the &quot;Browse..&quot; button using style sheets or some other method?

~tg

 

[CoreyBryant]

Unfortunately not. I have tried it a few times & also seen other experts ask & try. Seems we are stuck with that one for awhile.

__________________________
Corey

http://www.merchantaccounts4less.com

 

[theboyhope]

I suppose you could hide the file input and trigger it's click event from another element. I think that'd probably only work in IE though.

HTH.

 

[Vragabond]

You can set the style like any other element. Note that it will apply to the button and the field in front of it. On the button though, only some attributes work (border, font-size, maybe something else) while all will apply to the text box infront.

<input type=&quot;file&quot; style=&quot;border: 1px dashed #000000; background: #AAAAAA; color: black; font-family: tahoma; font-size: 8pt; font-weight: bold;&quot; />

This here will create a field with a gray background and 1px dashed black border, tahoma letters 8pt big and bold. The button (where I am looking right now) has 1px dashed black border and 8pt big letters. It is not much, but it can be changed a bit.

Hope it helps.

 

[thegentleman]

But I don't want to use the same style for both the input box and the button. Is it possible to split them somehow?

~tg

 

[MrBelfry]

Use class or id selectors:

input.classone {
 background-color: #000000;
}

input.classtwo {
 background-color: #ffffff;
}

<input type=&quot;text&quot; class=&quot;classone&quot;>
&
<input type=&quot;submit&quot; class=&quot;classtwo&quot;>

MrBelfry

 

[thegentleman]

But the button and the form field are created in one tag:

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

Therefor that solution wont work.

~tg

 

[MrBelfry]

Oh yeah sorry I forgot about that

MrBelfry

 

[Vragabond]

<input type=&quot;file&quot; id=&quot;file&quot; style=&quot;display:none;&quot; onChange=&quot;document.getElementById('output').value = this.value&quot;>
<input type=&quot;submit&quot; value=&quot;Browse...&quot; onClick=&quot;document.getElementById('file').click()&quot; style=&quot;color: white; height: 20px; width: 100px; border: none; background: red; font-size: 8pt; font-family: verdana;&quot;>
<input type=&quot;text&quot; name=&quot;ivek&quot; id=&quot;output&quot; value=&quot;none&quot; style=&quot;padding-left: 5px; color: yellow; width: 500px; border: 1px dashed blue; background: #3333AA; font-size: 9pt; font-family: tahoma;&quot;>

AFAIK this is an IE only thing, it works in my IE6. Button has its own style, text field its own. Javascript masters can correct the code if it is too buggy (or make it work cross-browser).

Hope it helps.

 

[theboyhope]

Yeah, like I said at the start!

 

[toysyn]

An image worked for me.

 

[toysyn]

scratch that.
Use this...
<style type=&quot;text/css&quot;>
.custfileform {
input.FormButton {
background-color: #b5dcb8;
color: #5b4223;
font-size: 11px;
font-weight: bold;
letter-spacing: 1px;
padding: 1px;
}
input.FormText {
background-color: #ffffff;
color: #000000;
border: 1px solid ;
}
textarea {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
border: 1px solid #000000;
}
</style>


Works in IE 3+ for sure