4 Replies - 9127 Views - Last Post: 22 March 2007 - 09:10 AM

#1 ktsirig  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 94
  • Joined: 14-September 05

CSS Not Working on File Button

Posted 07 October 2005 - 08:11 AM

Hi (again)

I followed what people here suggested for my previous post (I had problems styling input areas, submit buttons etc)

Now, everything is working EXCEPT 1 : The "browse-for-a-file" button

I thought that this button, since it is coded as <input type="file" ...> would be treated like the other input elements ,such as the buttons.
BUT THIS IS NOT HAPPENING!!!!!

Even if I change, for instance, font-size = 500px, the "Browse" button and the fonts inside the input area remain the same as without styling at all...

What am I missing here?
Sorry for asking so silly staff :(

Is This A Good Question/Topic? 0
  • +

Replies To: CSS Not Working on File Button

#2 skyhawk133  Icon User is online

  • Head DIC Head
  • member icon

Reputation: 1869
  • View blog
  • Posts: 20,282
  • Joined: 17-March 01

Re: CSS Not Working on File Button

Posted 07 October 2005 - 08:30 AM

Hi ktsirig, hope you don't mind, I edited your title so anyone else with the same problem can find the answer.

Can you show us your code for the other buttons, as well as the file button so we can test it in our own browsers and try to fix the issue you're having.

Thanks!
Was This Post Helpful? 0
  • +
  • -

#3 ktsirig  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 94
  • Joined: 14-September 05

Re: CSS Not Working on File Button

Posted 08 October 2005 - 06:04 AM

Hi, thanx for your time. I use :

input {
background-color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
}

for stylin input elements (I don't use any special for the 'Browse button' as I thought it would obey to the rule above).
I see people in other forums that say that 'Browse button' can't be styled because it is 'constructed' by the browser and not the user..
I use Mozilla Firefox btw.
Was This Post Helpful? 0
  • +
  • -

#4 fyrestorm  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 10
  • View blog
  • Posts: 3,113
  • Joined: 04-April 02

Re: CSS Not Working on File Button

Posted 08 October 2005 - 08:02 AM

css works on most anything, but apparently not on the file browse button... but there is a work around...a little javascript is necessary but it's easy enough I think...it's just a little magic...

<form name="form">

<!-- this is the proper browse for file input, but we're going to hide it, however, it's needed, because without it the file can't properly be uploaded -->
<input name="browse" type="file" style="display: none;">

<!-- this is where the filename will be displayed -->
<input name="file" type="text">

<!-- this is the browse button, it takes the value of the file you select and puts it both in the file box you created in the previous line and in the browse box that we hid -->
<input name="Submit" type="submit" class="button" value="Browse" onclick="document.form.browse.click(); document.form.file.value=document.form.browse.value; return false;">

<!--this is just the typically form submit button, you can name it whatever you like but you have to have the onclick property defined, it makes the real file browse button think that it browsed for a file -->
<input name="submit" type="submit" class="button" value="Upload" onclick='document.form.browse.disabled=true;'>

</form>



in your code that you use to actually upload the file, you'll refer to the actual browse input that we hid...

you can also apply css to the different elements

i hope this helps

This post has been edited by fyrestorm: 08 October 2005 - 08:04 AM

Was This Post Helpful? 0
  • +
  • -

#5 asarian  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 22-March 07

Re: CSS Not Working on File Button

Posted 22 March 2007 - 09:10 AM

View Postfyrestorm, on 8 Oct, 2005 - 08:02 AM, said:

css works on most anything, but apparently not on the file browse button... but there is a work around...a little javascript is necessary but it's easy enough I think...it's just a little magic...

<form name="form">

<!-- this is the proper browse for file input, but we're going to hide it, however, it's needed, because without it the file can't properly be uploaded -->
<input name="browse" type="file" style="display: none;">

<!-- this is where the filename will be displayed -->
<input name="file" type="text">

<!-- this is the browse button, it takes the value of the file you select and puts it both in the file box you created in the previous line and in the browse box that we hid -->
<input name="Submit" type="submit" class="button" value="Browse" onclick="document.form.browse.click(); document.form.file.value=document.form.browse.value; return false;">

<!--this is just the typically form submit button, you can name it whatever you like but you have to have the onclick property defined, it makes the real file browse button think that it browsed for a file -->
<input name="submit" type="submit" class="button" value="Upload" onclick='document.form.browse.disabled=true;'>

</form>



in your code that you use to actually upload the file, you'll refer to the actual browse input that we hid...

you can also apply css to the different elements

i hope this helps


This code doesn't work at all. Setting a field of type "text" to that of type "file" will perhaps copy the filename to it, but renders its content void. For instance, you can no longer use the 'upload' sub in CGI.pm ("Inappropriate ioctl for device.") to get an filehandle for it.

People should be obligated to test their code.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1