homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Customizing 'input type="file"' elements
Narrow width situations

10+ Year Member

Msg#: 3500170 posted 12:09 am on Nov 9, 2007 (gmt 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).



10+ Year Member

Msg#: 3500170 posted 3:30 pm on Nov 12, 2007 (gmt 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.


WebmasterWorld Senior Member 5+ Year Member

Msg#: 3500170 posted 5:11 pm on Nov 13, 2007 (gmt 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]

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved