Styling Upload File Input

HTML & CSS
1

I am trying to add space between my Form Input and the Upload Picture button, but it’s not working?!

Here is a snippet…


	<!-- UPLOAD PHOTO FORM -->
	<form id="uploadPhoto" action="" method="post">
		<fieldset>
			<legend>Upload a Photo</legend>

			<!-- User Photo -->
			<label for="userPhoto">Filename:</label>
			<input id="userPhoto" name="userPhoto" type="file" />
			<?php
				if (!empty($errors['upload'])){
					echo '<span class="error">' . $errors['upload'] . '</span>';
				}
			?>



/* UPLOAD PHOTO Styles */
input#userPhoto{
	padding: 0 10em 0 0;
}

What am I doing wrong?

Debbie

2

Don’t bother styling form fields, every browsers handles them differently on every OS. Setting them into a specific order is fine. But changing the appearance like changing the browse button on file upload fields will never work.

3

I agree with this. Though, there are some good replacement techniques like the gmail ‘Attach file’

Here’s an interesting article on topic, to me the downsides make it not that usable.
http://www.quirksmode.org/dom/inputfile.html

4

You can change the look of form inputs with css but beaware that for the browse button (for browsing for a file), the style of this can never be changed. The support for what can be done to change the look form elements like has already been said will vary from browser to browser so you should try and test to see what works with what browser for each potential browser version being used by the target audience.

5

You guys aren’t listening!

All I want to do is put some SPACE between the Input Box and the Button. (I don’t like how they touch each other?!)

I did not say I wanted to style the Input or Button themselves. I just want some breathing room, and the code posted above has worked in any other Form situation.

Debbie

6

If you are talking about the “Browse” button, you cannot move it, you cannot change it, cannot do anything with it. Thats the point. If you are talking about another button you created…Thats entirely different.

7

Really??? :shifty:

Wow… :eek:

Debbie

8

Presumably you have set the label to sit to the right of the input?

Anyhow, try margin instead of padding:

input#userPhoto{
	margin: 0 10em 0 0;
}
9

No, see attached…

Anyhow, try margin instead of padding:

input#userPhoto{
	margin: 0 10em 0 0;
}

That didn’t work either.

Debbie

10

O, I see … that button is auto-generated by the browser. Hm, you might be out of luck, then. :slight_smile:

11

[ot]

You always say that to those answering.
In fact, all 3 of us answered your question from different perspectives.[/ot]

12

logic_earth got it right the first time… Do you SEE two separate elements in your code? No, you have ONE input of type FILE… So NO, you cannot put a space between the input and it’s auto-generated button. That’s all ONE HTML element, so styling it there’s only ONE thing there – it exists only ONCE in the DOM – your margin being applied to the right of the ENTIRE element.

input[file] – that’s all there is… one single DOM element – might LOOK like two when rendered (the text box and the button) but it’s only actually ONE.

Again, default appearance has nothing to do with what a tag is or how it works.