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.

Community · Accepted Answer · 2017-05-23 11:48:26Z

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, 2017 at 11:48

CommunityBot

11 silver badge

answered May 31, 2013 at 1:20

The Maniac

2,6233 gold badges20 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:19:43Z

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, 2017 at 12:19

CommunityBot

11 silver badge

answered May 31, 2013 at 2:09

Ben Racicot

6,03816 gold badges82 silver badges139 bronze badges

1 Comment

Jed Over a year ago

im sorry but im talking about input[type="file"] and NOT input[type="text"]

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related