Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

css + file upload browse button

Status
Not open for further replies.

aljc

Programmer
Nov 24, 2000
29
0
0
GB
does anybody know how you can apply css to the browse button you get when you create a file upload form
( <input type=file name=uploadfile> )

thanks in advance
al
 
you could use the style property as follows:

<input type=file name=uploadfile style=&quot;whatever&quot;>



 
yes but:

(v.sorry - i wasn't at all clear in my question)

i already tried as suggested but the problem is that whilst the text input displays with the specified style,
the browse button that appears is the standard old grey button.
some style attributes are followed ( if you do a style='height:200px;' then the button does have a height of 200 ) but the ones that i wanted are color/background-color and font*

thanks
al



 
Here's a style I use in my css to make a gold-colored button:
Code:
.goldbutton { color:#003a29; font-weight:bold; background:#dfd490; border-color:#bea422; border-style:outset; border-width:3; }
Then just put style=&quot;goldbutton&quot; in the button tag.

It works in IE. I don't even bother to test NS anymore.
Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.
 
this works for me. I understand it is not useable on all platforms, versions, etc, but on my win2k and winnt boxes with IE5.5, it works fine, but has limitations. It will not allow a user to type a file into the object, it must be browsed for:

<body>
<input type=file onchange=&quot;eros.value=this.value&quot; id=&quot;benluc&quot; style=&quot;display:none&quot;>
<input readonly id=&quot;eros&quot;>
<button onClick=&quot;benluc.click()&quot; style=&quot;background-color:red;border:1px solid #336699;cursor:hand;color:white&quot;>Try This!</button>

<br><br>

<button onclick=&quot;alert(benluc.value)&quot;>Test Input Value</button>
jaredn@eae.net -
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top