<input type="file" /> "select file" button fails to resize width for any font-size

<input type="file" /> "select file" button fails to resize width for any font-size

Hi

Im currently working on a JQuery plugin that allow file upload using ajax using the infamous "target - iframe" model.

This works nicely in Opera without any quirks or hacks which I would like to congratulate the developer team for.

However the second part of this plugin project has left me with a bit of a problem. I want to style an <input type="file" /> element in any way. This is notoriously difficult to do, there practically no CSS support for this element.

The big problem is the "surface" area of the "select file" button associated with the <input type="file" /> element. What you really want is be able to control this buttons size, both in terms of height and width. This can be done with normal css attributes in Chrome af FF, but not in IE and Opera.

However setting the font-size to something huge like 9999px will bloat the text in the button so sufficently that you practically have an infinitly sized button which you can then hide in a container with overflow: hidden and voila you got a customizable <input type="file" /> element. But only in IE.

In opera only the height is affected by the font-size hack. So there is - to my knowledge - absolutely no way to change the width of the select file button associated with the <input type="file" /> element.

I've spent quite a lot of time only trying to find a solution, but it seems like Opera is simply "broken" in this regard.

So Opera might decide that this is just the behavior and we developers should learn to live with it. But you should know that because Opera does not resize the select button to fit the bloated button text, it gets truncated, leaving you with an ugly amputated select button.

Please fix it. And while you're at it, add support for 1995+ style CSS like height and width for Christ sake.

Thx - from a frustrated developer

You didn't post any examples. That said, this sounds like it could provide an answer?