• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 351
  • Last Modified:

Input file problem with Firefox

I want to create a flat input file (no 3D border), including the browse button. I made it like this :

.filefield {
background-color: #FFFFFF;
border-color: #888888;
border-style: solid;
border-width: 1;
font-size: 10pt;
font-family: arial;
}

It works fine with IE 6, but it does not work with Firefox.

Anyone know how to fix it ?
0
kapot
Asked:
kapot
  • 5
  • 3
2 Solutions
 
GrandSchtroumpfCommented:
input file has poor support for styles.
for a detailed overview, read this interesting article:
http://www.quirksmode.org/dom/inputfile.html
0
 
antiblandCommented:
kapot,

The following link will show you--in detail--how to style your file input elements any way you'd like.

 http://www.quirksmode.org/dom/inputfile.html

- Antibland
0
 
antiblandCommented:
GrandSchtroumpf ,

I just noticed that we referenced the same link--with a completely opposite view of its contents.  After seeing what the author of that article did with input file, how can you say that input file has poor style support?  That is to say, while attractive styling might be difficult to achieve here, the author has shown that it can certainly be done.

- Antibland
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
antiblandCommented:
kapot,

Have you figured everything out?

- Antibland
0
 
antiblandCommented:
My recommendation to kaput would be to split the points between myself and GrandSchtroumpf.  The link we've both provided explains--step-by-step--ways to achieve some control over styling of input file.  True, there are downsides to using some of these techniques, and older, near-dead browsers will have problems handling much of the code, but the link shows how to make things work for modern, forward-thinking browsers.

- Antibland
0
 
GrandSchtroumpfCommented:
> how can you say that input file has poor style support?
the link shows an uggly (and somewhat buggy) workaround... not more than that.
i posted that link because it shows the input/file poor support for styles in different browsers.
the actual workaround is an interesting exercise, but I would probably not use that on a real site.
Graphic designers probably won't agree with my point of view though.
0
 
antiblandCommented:
Take a look at kapot's code:

background-color: #FFFFFF;
border-color: #888888;
border-style: solid;
border-width: 1;
font-size: 10pt;
font-family: arial;

He does not show an interest in web standards here.  No CSS shorthand was used, the border-width property has no value associated with it, font-size should be specified in px or em, not pt, and font-family should have other styles backing it up.  If I were to venture a guess, he is more of a graphic designer than a web builder or standards fanatic.  Threrefore, the buggy but function example we've both referenced should probably suit him fine.

For example, If I had seen this posted:

.filefield {
background-color: #fff;
border: 1px solid #888
font-size: .8em;
font-family: Arial, Helvetica, sans-serif
}

I would have been less inclined to have suggested he visit the link in question.

- Antibland
0
 
GrandSchtroumpfCommented:
Lol... show me your code and i will tell you who you are.
My comment was directed to you, to explain my first comment.
Anyway, we're here to close this question.
I don't have any special recommendation, so I'll leave the appreciation to Sean.
<:°)
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now