• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

An Annoying Firefox File Input Width Bug (With Fix)

General · January 17, 2013

in all my years being a web developer I’ve never noticed Firefox has an annoying problem with file input fields and the size attribute. For you see if you have a file input field in a form with the size attribute specifying the number of characters in width the input is, you’ll notice setting the width via CSS is completely ignored regardless of whether or not you use an important declaration.

For some reason, Firefox allows the size attribute to hold precedence over any other specified width (in my opinion, a bug). The fix I came up with was a simple line of jQuery code which might not be super efficient or even best practice, but it works.

The code below is for a Contact Form 7 form (which adds the size attribute for some reason). If you have another form, just remove the .wpcf7 class from the query and it’ll target all file input fields. Good luck.

$(".wpcf7-form input[type=file]").removeAttr('size');

Dwayne

Leave a Reply Cancel reply

1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
soupcaninsole
soupcaninsole
9 years ago

Hi, I do think this is a great blog. I stumbledupon it 😉 I’m going to come back yet again since I book marked it. Money and freedom is the greatest way to change, may you be rich and continue to guide others.

0

Primary Sidebar

Popular

  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • Which Neural DSP Archetype Plugins Should You Buy?
  • Smoke Detector Randomly Goes Off Early Hours of The Morning
  • How To Mock uuid In Jest
  • Neural DSP Reveal Details About the Long-Awaited Quad Cortex Desktop Editor
  • Deno Raises $21M - but is anyone using it yet?
  • Web 3.0 may have died before it even started
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?
  • How to Use Neural DSP Archetype Plugins With the Quad Cortex

Recent Comments

  • Jay on Neural DSP Reveal Details About the Long-Awaited Quad Cortex Desktop Editor
  • john on Deno Raises $21M – but is anyone using it yet?
  • Oranges on How To Store Users In Firestore Using Firebase Authentication
  • Precious on Fixing Sequel Pro SQL Encoding Error For Imported SQL Files
  • James on A List of WordPress Gutenberg Core Blocks

Copyright © 2022 · Dwayne Charrington · Log in

wpDiscuz