Styling a form input[type=file]?

This should be very basic, but its turning out not to be. I am doing a small auxiliary form to upload files. Since there is a posibillity of many files being uploaded simultaneously, broke up the form into two columns of input type= file buttons. To do so, an TRY , to avoid sizing issues, made two divs, floated them left, and assigned width of 50%,. within each column div i set the inputs to display block , width 100%. The code is as follows:

CSS
*{ margin:0; padding:0;}
h4{font-size: 100%; padding-left:.25em; padding-bottom:.5em}
.column{width:50%;float: left}
.column input{ display:block; margin:.5em; width:80%; float: none; background: #fff}
form{ width:24em; margin:0 auto; background: pink; padding:1em}
#sub{clear: both; width:auto; padding-top: 1em; text-align: left; padding-left:50%}
#sub input{float: none; width:auto; display: inline; margin-left:-3em}

MARKUP:

	<form id="FormName" action="uload" method='POST' enctype='multipart/form-data' name="FormName">
				<h4>Image Upload Area</h4>
				<div class="column">
				<input type="file" name="user_file[]"> 
				<input type="file" name="user_file[]" > 
				<input type="file" name="user_file[]" >
				</div>
				<div class="column">
				<input type="file" name="user_file[]" > 
				<input type="file" name="user_file[]" > 
				<input type="file" name="user_file[]" > 
				</div>
				<div id="sub"><input type="submit" name="submit" value="Submit" > </div>
	</form>

I guess the issue is the “browse” buttons which appear and break though the container divs ( in FF and IE only). In fact, in FF the width property is having no effect at all ( besides decreasing the width has an adverse effect on IE and Safari) UGH.

So my question is is styling inputs for files possible? I am open to alternate solitions…

thanks again for all the … ahem… input.

Inputs are replaced inline elements and as a result their dimensions are intristic :slight_smile:

Styling a file input is just about the hardest thing to try to do using CSS. To start with each browser has its own separate way of displaying a file input and there are lots of security restrictions on how it works that make even JavaScript substitution methods difficult to implement.

See http://www.quirksmode.org/dom/inputfile.html for a detailed explanation of what is possible.

One of the biggest problems I ran into styling file inputs (besides the fact that they’re damn-near impossible to style anyway as Felgall mentions) was that each browser chooses a different word depending on your language.

In Engrish, the browsers tend to say “Browse…” although my Engrish Safari says “Choose file”. Hm. My Dutch Chrome is laid-out like Safari and says “Bestand Kiezen” and then “Geen bes… gekozen” instead of “no file selected” as in English. You see Chrome shortened the line of text.

In Dutch, my Firefox says “Bladeren”. That’s a longer word than “browse”. My Spanish K-Meleon says “Examinar…” which is also longer text.

You see that the browser’s default language has an effect that you don’t have with any other input type.

so… .i cant even just style the WIDTH of this element??? I was kinda hoping that there was a way to separate the button from the field at least.

In some browsers all you get for that field is a button. The field is all one unit and you don’t know how it will be displayed. The page I linked to above goes into detail on the only way that has been found that can successfully style the element given the very different appearance it has in different browsers.

felgall, I was trying to avoid JS. But since there is no other way. Thanks al!!!

There are a number of form fields where JavaScript is the only way to style them.

If you are interested in a book dealing with form field styling the SitePoint book “Fancy Form Designs” goes into great detail as to what styling of forms can be done using CSS and what styling needs JavaScript.and how to most effectively style each field type.