Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Customizing 'input type="file"' elements

Narrow width situations

12:09 am on Nov 9, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:June 19, 2004
posts: 152
votes: 0

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).

3:30 pm on Nov 12, 2007 (gmt 0)

Full Member

10+ Year Member

joined:Feb 14, 2005
posts: 266
votes: 0

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.
5:11 pm on Nov 13, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 18, 2007
votes: 0

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]


Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members