style image upload field

input type="file" - Why won't it style

[Geoffrey james]

Hi all,

I have a form, one of the input boxes is where users can place a file within it, the problem is that I cant seem to style the box itself, I just want to have a black 1 px border like the rest of the text feild and at the mo there is a thick border on left and at top and thin on other sides, any ideas.

here is css and html to style and create form

CSS:-----------------------------------------------------------------
fieldset {
border: 1px solid #333333;
padding: 5px;
margin-bottom: 20px;
}

label {
clear:left;
display:block;
float:left;
width:120px;
text-align:right;
padding-right:10px;
color: #1C1C1C;
margin-bottom:0.5em;
}

input {
border: 1px solid #4C4C4C;
padding: 0 2px;
margin-bottom: 0.3em;
background: #FFF;
}
textarea {
border: 1px solid #4C4C4C;
width: 220px;
text-align: left;
background: #FFF;
margin-bottom: 10px;
}

HTML-------------------------------------------------------------
<form action="" method="post">

<fieldset>
<legend id="contact">PERSONAL</legend>
<label for="firstname">Name : </label>
<input type="text" name="name" size="32" />
<br />
<label for="author">Author Name : </label>
<input type="text" name="author name" size="32" />
<br />
<label for="email">Email : </label>
<input type="text" name="email" size="32" />
</fieldset>

<fieldset>
<legend id="contact">DETAILS</legend>
<label for="tutorialtitle">Tutorial Title : </label>
<input type="text" name="title" size="32" />

<label for="tutorialurl">Tutorial URL : </label>
<input type="text" name="url" size="32" />

<label for="websitename">Website Name : </label>
<input type="text" name="websitename" size="32" />

<label for="siteurl">Website URL : </label>
<input type="text" name="websiteurl" size="32" />

<label for="thumbnail">Thumbnail Image (40x40px): </label>
<input type="file" name="thumbnail" size="25" />

<label for="comments">Brief Description : </label>
<textarea rows="10" name="message" cols="57"/>
</textarea>
</fieldset>
<input type="submit" class="formbutton" name="submit" value="Submit" size="10"/>
</form>

Cheers in advance.

Geoffb

[penders]

Trying to style <input type="file" elements are notoriously difficult. I can only provide a link (sorry) to quirksmode.org where the problem is discussed and an apparent solution is offered:
[quirksmode.org...]

[penders]

Just to note also, as you'll see from the above link, that the Safari browser (v1.3.2) does not seem to even render a file input box (just a button and a bit of text). I'm wondering, is this the same for the later versions?

[Setek]

Just to note also, as you'll see from the above link, that the Safari browser (v1.3.2) does not seem to even render a file input box (just a button and a bit of text). I'm wondering, is this the same for the later versions?

Yep, it's all about consistency (of operating system form controls) :)

This post is much like the below post, so I think I'll link to it rather than re-write it:

[webmasterworld.com...]