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

hairyfreak · 02-04-2006, 01: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

????: NamePros.com http://www.namepros.com/programming/164458-help-customising-form-lot-harder-than.html
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, 01: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, 03:24 PM

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

-Steve

hairyfreak · 02-05-2006, 02: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, 04: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, 04: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, 01:02 PM	THREAD STARTER #1 (permalink)
hairyfreak NamePros Regular Join Date: Dec 2005 Location: Derbyshire, UK Posts: 887	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 ????: NamePros.com http://www.namepros.com/programming/164458-help-customising-form-lot-harder-than.html 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, 01:17 PM	#2 (permalink)
moondog NamePros Regular Join Date: Jun 2004 Posts: 587	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 __________________ Can't wait to be out of this forsaken business. Getting close! :)

02-05-2006, 04:18 AM	#5 (permalink)
Rowan W NamePros Regular Join Date: Dec 2004 Location: QLD, Australia Posts: 713	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 11:05 AM
MS Access Sub Form	ridesign1	Programming	0	04-03-2005 07:06 AM
We customize form for your website at very good price.	shrekwarrior	Web Development Wanted	0	03-25-2005 09:05 PM
Blowout Lot sale	Filtered	Domains For Sale - Make Offer	1	06-22-2004 06:28 PM

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

02-05-2006, 02:22 AM	THREAD STARTER #4 (permalink)
hairyfreak NamePros Regular Join Date: Dec 2005 Location: Derbyshire, UK Posts: 887	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, 04:34 AM	THREAD STARTER #6 (permalink)
hairyfreak NamePros Regular Join Date: Dec 2005 Location: Derbyshire, UK Posts: 887	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)