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!

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

<input type="file"> browse button 1

Status
Not open for further replies.
BigBadDave

BigBadDave

Programmer
May 31, 2001
1,069
EU
Hi,
can I add onMouseOver and class information to the browse button of the: <input type=&quot;file&quot;>? Regards
David Byng
spider.gif

davidbyng@hotmail.com
 
Sort by date Sort by votes
Hi David,

I'm not sure if this is what you ment, but take a look at my answer in : thread215-311301

Hope this helps,
Erik <-- My sport: Boomerang throwing !!
!! Many Happy Returns !! -->
 
Upvote 0 Downvote
I'm pretty sure that you can't.
[tt]
<input type=file style=&quot;background-color:gold; color:green; font: bold 12pt arial; width:120px; heigth:50px&quot;>
[/tt]
As you can see, it affects only input field. Of course, the button text font/size also changes, but its colors and dimentions stay default.

One thing: 'width' is treated in IE as the total width of input field width + button width, so if you give a small width the input field will not be visible. This happens in IE only (IE5 to be more exact, can't test this in IE6) - Mozilla and Opera both seem to ignore width definition for <input type=file>.
 
Upvote 0 Downvote
Nah mate, it changes buttons too, thats why I stuck a star up there :)

<INPUT TYPE=&quot;button&quot; ID=&quot;btnBrowse&quot;
STYLE=&quot;
FONT-FAMILY:arial;
FONT-SIZE:8pt;
margin: 0px;
padding: 0px;
border-style: solid;
border-width: 1px;
border-color: red;
BACKGROUND-COLOR:darkblue;
Text-Decoration:none ;
color : white
&quot;
onClick=&quot;fileUpload.click()&quot;
VALUE=&quot;Select a File&quot;>

everything in it takes effect for some real nice buttons. ______________________________________________________________________
There's no present like the time, they say. - Henry's Cat.
 
Upvote 0 Downvote
You add the style to <input type=button>.
Try doing the same for <input type=file> and you'll see.
The example shown manipulates with &quot;fake&quot; file upload button but this doesn't work with real one.
 
Upvote 0 Downvote
Did you read the linked post Starway? after reading it it led me to this:

<HTML>
<HEAD>
<TITLE>Customizing INPUT TYPE=FILE Appearance</TITLE>
<LINK REL=&quot;stylesheet&quot; HREF=&quot;global.css&quot;
TYPE=&quot;text/css&quot;>
</HEAD>
<BODY>
<p>
<INPUT TYPE=&quot;file&quot; ID=&quot;fileUpload&quot; STYLE=&quot;display:none&quot;
onChange=&quot;textFilename.value = this.value;&quot;>
<INPUT TYPE=&quot;text&quot; ID=&quot;textFilename&quot;
STYLE=&quot;
BORDER-STYLE: solid;
BORDER-WIDTH: 1px ;
BORDER-COLOR: red;
FONT-SIZE: 12px;
FONT-FAMILY: Geneva, Arial, Helvetica, san-serif;
onmouseover('BACKGROUND-COLOR: #ffffff') onmouseout('BACKGROUND-COLOR: GREEN')
SIZE=&quot;40&quot; DISABLED>
<INPUT TYPE=&quot;button&quot; ID=&quot;btnBrowse&quot;
STYLE=&quot;
FONT-FAMILY:arial;
FONT-SIZE:8pt;
margin: 0px;
padding: 0px;
border-style: solid;
border-width: 1px;
border-color: red;
BACKGROUND-COLOR:darkblue;
Text-Decoration:none ;
color : white
&quot;
onClick=&quot;fileUpload.click()&quot;
VALUE=&quot;Select a File&quot;>
</p>
<p>&nbsp;</p>
<p>&nbsp; </p>
</BODY>
</HTML> ______________________________________________________________________
There's no present like the time, they say. - Henry's Cat.
 
Upvote 0 Downvote
Yes I did.
The styles with colors, border and other are applied to an ordinary <INPUT TYPE=&quot;button&quot;> with ID=&quot;btnBrowse&quot; and <INPUT TYPE=&quot;text&quot;> with ID=&quot;textFilename&quot;.

The real <INPUT TYPE=&quot;file&quot;> is hidden using STYLE=&quot;display:none&quot; and is accessed using onClick=&quot;fileUpload.click()&quot;.

Try to add those styles to the real <input type=file> and you'll see that I'm right.
 
Upvote 0 Downvote
Oh that was plainly obvious a while ago, but this qualified as a real nice workaround so it got &quot;starred&quot;.

Its just a shame that there are limits to what you can do with those ugly &quot;browse&quot; buttons and drop downs .....

Is there any way to make a drop down look any better? ______________________________________________________________________
There's no present like the time, they say. - Henry's Cat.
 
Upvote 0 Downvote
Hi guys,

Here is some code I posted a while back that lets you use images etc. Again, this is a workaround..
Code: 
<i>Filename:</i>
        <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

sales@freshlookdesign.co.uk

The pessimist complains about the wind. The optimist expects it to change. The leader adjusts the sails. - John Maxwell
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Mackeinath
  • Locked
  • Question
Xml file import
Replies
0
Views
575
Mackeinath
Mackeinath
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
203
lmcate
lmcate
Alt255
  • Locked
  • Question
Navigate to bookmark in local file
Replies
2
Views
638
Alt255
Alt255
pendle666
  • Locked
  • Question
Inserting same line of text of every web page - &quot;link&quot; insert? 1
Replies
6
Views
216
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top