An Annoying Firefox File Input Width Bug (With Fix)

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');