Help with customizing a form - A lot harder than you would think!

cwnt · Feb 4, 2006

Hi,
I really need some help at the moment. I am in the process of writing an image upload script for an image hosting site I will be starting. However, I need to change the looks of the default input areas to fit in properly with the template. Now, I know that it is extremely easy for almost any type of input, but I am trying to do it for the 'file' type, and I am having some serious problems.
For example, if I use CSS to set the border style, with a width of one pixel, all that changes is the colour of the border, not its width. However, this only occurs in FireFox. In IE (surprisingly) it works fine. Does anyone know why this is happening?
Also, I could really use some tips for editing the looks of the 'file' input type. Please let me know anything you know about it

Thanks so much.
By the way, in case I wasn't clear about what I am trying to style, it is "<input type='file'>" that I am trying to edit.

moondog · Feb 4, 2006

As far as I knew.. . You could NOT alter the look and feel of the file input type. I am surprised IE let you change it.

-Bob

stscac · Feb 4, 2006

http://www.thescripts.com/clientsidescripting/dhtml/css/tutorials/introductiontocss/page1.html

-Steve

cwnt · Feb 5, 2006

Bob, I was very surprised as well, usually IE works with almost nothing

Steve, thanks, but that method only works with standard text inputs, not the file one.

Rowan W · Feb 5, 2006

The file input field combines two different fields in itself, so styling will affect the button as well as the text area. It's simply best to leave it unstyled or find some javascript that allows you to not use the file input field.

Also, I don't think there's any definition of how a file input field should behave when it's styled, as a result they're handled completely differently in Firefox, IE and Opera. If you have a look at the way Opera handles it, you'll notice it makes more sense.

You might be able to find a JavaScript way around it by using a separate text and button input.

cwnt · Feb 5, 2006

That's exactly what I've just done Rowan

I set it up so that the file input was invisible, then positioned a normal text input at the same position. Since the file input is invisible though, I had to write a simple Javascript bit to copy the text from the file input and place it in the input, so the user can see the location of the file they have chosen. It's not perfect, but it seems to be working fine for me so far

Help with customizing a form - A lot harder than you would think!

Established Member

Established Member

A Wealth of KnowledgeVIP Member

Established Member

Established Member

Established Member

Similar threads

We're social

USAirMail.Com

Iklor.com

CryptoGroupInc.com

yamswap.com

IsDefi.com

brightmarket.de

DirectMerchantServices.com

OaklandBodyshop.com

ZeroVG.com

certifiedbuildinginspections.com

Pinned

Appreciation

Agreement

Answers

Relevance

Reaction

Status

Feeling