homepage Welcome to WebmasterWorld Guest from 54.242.200.172
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Accredited PayPal World Seller

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

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




msg:3500172
 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).

 

jetboy




msg:3502804
 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.

Xapti




msg:3503908
 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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved