By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,454 Members | 3,208 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,454 IT Pros & Developers. It's quick & easy.

How To Style The <input type="file /> Tag With CSS

dmjpro
100+
P: 2,476
When the browser encounters
Expand|Select|Wrap|Line Numbers
  1. <input type = file>
Then a text box followed by a button appears on the browser window.

What i want to do:
Change the separate styles of the two elements as in DOM it is treated as a single one.

Can i do this using style sheet?
Feb 24 '07 #1
Share this Question
Share on Google+
12 Replies


Expert 100+
P: 1,892
when browser encounters ..

<input type = file>
then a text box follwed by a button appears on the browser window.

now what i want to do that ...
change the seperate styles of the two elements as in DOM it is treated as a single one...

can i do this using stylesheet?????

thanx in advance........
I don't see why not give them both the same class.
Feb 24 '07 #2

dmjpro
100+
P: 2,476
sorry...

i don't understand ur point of view
Feb 25 '07 #3

dmjpro
100+
P: 2,476
friends ......

i got a temporary solution .......


<input type = file name = browse style = 'display:none'>
<input name = file_name>
<input type = button onclick = 'browse.click();file_name.value = browse.value'>

here i can change the style of last two elements which are two seperate elements in html page .....
the button will work on behalf of the file input tag ....which is invisible ...

but here is a page submitting problem ......

i m trying to slove it now ....

if i slove it then i send u in details .........

best of luck friends ......
Feb 27 '07 #4

Expert 100+
P: 1,892
friends ......

i got a temporary solution .......


<input type = file name = browse style = 'display:none'>
<input name = file_name>
<input type = button onclick = 'browse.click();file_name.value = browse.value'>

here i can change the style of last two elements which are two seperate elements in html page .....
the button will work on behalf of the file input tag ....which is invisible ...

but here is a page submitting problem ......

i m trying to slove it now ....

if i slove it then i send u in details .........

best of luck friends ......
DMJPRO,
What are you trying to do now I'm completely lost. Are you trying to get the location of a file and style the text box + button? I'll see if I can work up an example. Perhaps a link to the page would help.

Aric
Feb 27 '07 #5

Expert 100+
P: 1,892
when browser encounters ..

<input type = file>
then a text box follwed by a button appears on the browser window.

now what i want to do that ...
change the seperate styles of the two elements as in DOM it is treated as a single one...

can i do this using stylesheet?????

thanx in advance........
DMJ,
I tried this:
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2.     <html>
  3.         <head>
  4.             <title>Test File</title>
  5.                 <style type="text/css">
  6.  
  7.         .clsFile
  8.                 {
  9.         border: 1px solid black;
  10.         background-color: red;
  11.         }
  12.  
  13.         </style>
  14.         </head>
  15.             <body>
  16.         <form action="#">
  17.                <input type="file" class="clsFile" />
  18.         </form>
  19.             </body>
  20. </html>
  21.  
Now I see what you mean check out this I think it should help.
Feb 28 '07 #6

dmjpro
100+
P: 2,476
thanx for ur replyyyyyy ......

a good link u sent ...........

again a lot of thanx ........
Feb 28 '07 #7

Expert 100+
P: 1,892
thanx for ur replyyyyyy ......

a good link u sent ...........

again a lot of thanx ........
No problem as soon as I tried to style the input file I realized what you meant.


Aric
Feb 28 '07 #8

P: 1
This script will let you use an image for the 'Browse...' button and style the textbox. It also clears the path name from both the file and text tags so they stay in synch. I also have it so the image path is displayed on submit so you can see it is working... take that out when you use it.

<html>
<head>
<script type="text/javascript">
function setPath(f) {
document.getElementById('mypath').value = f;
}
function browse() {
document.getElementById('realFile').click()
}
function clearIt(f) {
f.value='';
var d = document.getElementById('browser');
var olddiv = document.getElementById('realFile');
var new_element = document.createElement( 'input' );
new_element.type = 'file';
new_element.id='RealFile';
new_element.onchange = function() {document.getElementById('mypath').value = document.getElementById('realFile').value;};
d.replaceChild( new_element,olddiv );
}
</script>
</head>
<body>
<form onsubmit="alert(document.getElementById('realFile' ).value);return false;">
<input type="text" style="width=300px;border:solid 1px #0000FF" id="mypath" onfocus="clearIt(this)">
<a href=#" onclick="browse()"><img src="d.gif" border=0></a>
<div id="browser" style="display: none">
<input type="file" id="realFile" onchange="setPath(this.value)"><p>
</div>
<input type="submit" >
</form>
</body>
</html>
Apr 4 '07 #9

P: 1
Hi Mike, your code is great but it doesn't work.
When I click the image it doesn't open any browsing window.

Do you any idea about that?

THANKS
Feb 17 '08 #10

drhowarddrfine
Expert 5K+
P: 7,435
1) You want to ask this question on the javascript board.
2) This thread is a year old.
Feb 18 '08 #11

P: 1
This is one of the smart answer for your problem...




<input type = file name = browse style = 'display:none' onchange="file_name.value = browse.value">


<input name = file_name >

<input type = button onclick = 'browse.click();'>




Got it friends......
Mar 27 '13 #12

10K+
P: 13,264
The thread was already very old in 2008. We are now in 2013 ...
Mar 27 '13 #13

Post your reply

Sign in to post your reply or Sign up for a free account.