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

hairyfreak · 02-04-2006, 12:02 PM

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 · 02-04-2006, 12:17 PM

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 · 02-04-2006, 02:24 PM

http://www.thescripts.com/clientside...css/page1.html

-Steve

hairyfreak · 02-05-2006, 01:22 AM

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 · 02-05-2006, 03:18 AM

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.

hairyfreak · 02-05-2006, 03:34 AM

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

02-04-2006, 12:02 PM	#1 (permalink)
hairyfreak NamePros Regular Join Date: Dec 2005 Location: Derbyshire, UK Posts: 887 164.35 NP$ (Donate)	Help with customising a form - a lot harder than you would think! 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.

02-04-2006, 12:17 PM	#2 (permalink)
moondog NamePros Regular Join Date: Jun 2004 Posts: 476 3,677.00 NP$ (Donate)	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 __________________ The mass purge has begun.

02-05-2006, 03:18 AM	#5 (permalink)
Rowan W NamePros Regular Join Date: Dec 2004 Location: QLD, Australia Posts: 713 1,869.00 NP$ (Donate)	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. __________________ Flash is bad for websites Why tables for layout is stupid IE IS BAD

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
form filling script needed	Guzey	Web Design Discussion	0	04-10-2005 10:05 AM
MS Access Sub Form	ridesign1	Programming	0	04-03-2005 06:06 AM
We customize form for your website at very good price.	shrekwarrior	Web Development Wanted	0	03-25-2005 08:05 PM

02-04-2006, 02:24 PM	#3 (permalink)
stscac A Wealth of Knowledge Join Date: Aug 2004 Posts: 3,794 47.60 NP$ (Donate)	http://www.thescripts.com/clientside...css/page1.html -Steve

02-05-2006, 01:22 AM	#4 (permalink)
hairyfreak NamePros Regular Join Date: Dec 2005 Location: Derbyshire, UK Posts: 887 164.35 NP$ (Donate)	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.

02-05-2006, 03:34 AM	#6 (permalink)
hairyfreak NamePros Regular Join Date: Dec 2005 Location: Derbyshire, UK Posts: 887 164.35 NP$ (Donate)	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

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)