468,242 Members | 1,888 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,242 developers. It's quick & easy.

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

dmjpro
2,476 2GB
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
12 119901
AricC
1,892 Expert 1GB
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
2,476 2GB
sorry...

i don't understand ur point of view
Feb 25 '07 #3
dmjpro
2,476 2GB
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
AricC
1,892 Expert 1GB
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
AricC
1,892 Expert 1GB
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
2,476 2GB
thanx for ur replyyyyyy ......

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

again a lot of thanx ........
Feb 28 '07 #7
AricC
1,892 Expert 1GB
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
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
macsig
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
7,435 Expert 4TB
1) You want to ask this question on the javascript board.
2) This thread is a year old.
Feb 18 '08 #11
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
r035198x
13,262 8TB
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.

Similar topics

1 post views Thread by Jesper Hermansen | last post: by
7 posts views Thread by Tim Slattery | last post: by
reply views Thread by NPC403 | last post: by
reply views Thread by kermitthefrogpy | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.