How to fix display issue of Firefox with input[type="file"] in CSS

Question

Reading from articles, I found out that input[type="file"] have unique views across different browsers.

I'm looking for a quick fix for this issue using CSS(only if possible) because I need to adjust only the width of the element.

Here is the site (http://210.48.94.218/~printabl/contact/) I'm currently working with. If browse the page with firefox, the page view gives undesirable output.

enter image description here

Q: How can I adjust the width using CSS? Or any easiest fix for this issue.

score 1 · Answer 1 · edited May 23 '17 at 11:48

1

You can't reliably style file inputs with CSS since they're rendered differently across each browser.

Maybe this hack is what you're looking for: SO Question. I'm not sure how reliable it is across browsers though.

edited May 23 '17 at 11:48

Community

1
1

answered May 31 '13 at 01:20

The Maniac

2,628
3
19
29

score 0 · Answer 2 · edited May 23 '17 at 12:19

0

The input attributes will size the fields

<input name="" type="text" size="10" maxlength="40" size=50>

CSS styling works as you'd expect

input[type=file] {width: 100%}

Possibly duplicate How to style an input[type=file] in css that would render crossbrowser compatible?

edited May 23 '17 at 12:19

Community

1
1

answered May 31 '13 at 02:09

Ben Racicot

5,332
12
66
130

im sorry but im talking about input[type="file"] and NOT input[type="text"] – Jed May 31 '13 at 02:34

How to fix display issue of Firefox with input[type="file"] in CSS

2 Answers2