Customizing 'input type="file"' elements

Narrow width situations

[thesheep]

This hasn't struck me before, but I guess there is no way to alter the appearance of an input type="file" element.

For example in FF, this appears with the 'browse' button to the right of the text box, resulting in a width of maybe around 250px.

I have a design with an upload widget in a column of only 200px wide, so that is a problem, to say the least!

Anyone come across any workarounds for this? (Other than change the design).

[jetboy]

If you're prepared to resort to JavaScript you can do it. Quirksmode has an article on this, and I believe it's made an appearance in at least one JavaScript framework.

[Xapti]

I highly recommend you do not do anything, well, not much, to inputs with type=file. Why? because browsers implement them very differently, particularily Safari... There's a whole article online about it (I'm sure there's tens, if not hundreds of them, but I'm talking about a specific one), I believe on Eric Meyer's webpage (meyerweb.com?).

When it comes to the solution of your problem, I suggest just using overflow:scroll, even though it may look a bit ugly. In my opinion the ugliness is due to the fact you're using fixed width and are too stubborn to change the design, but if you want to keep the design, scroll will keep things useable.

Again on the fixed width thing: realize that if you have any large text (either long words, or just big font sizes, especially if sized with EMs or points; granted, if using pixels or points you got a whole slew of problems there as well anyways), text which is increased (by the user) from what you think is default may no longer fit in the container, causing other problems.

[edited by: Xapti at 5:17 pm (utc) on Nov. 13, 2007]