CSS for Upload (File Field)

HTML & CSS
1

Hi

I need some help regarding the <input type =“file” …

actually, i want to change the button look and also I want to change the border color of the text box in the <input type =“file”.

Please help me how to do that.
Thanks
Zeeshan

2

Give a class to the <input>

<input type=“file” class=“changing”>

.changing{border:1px solid red;/styles here/}

3

Great, thanks but how to style the button ?

4

Give the <input> that is the button a class and style it that way. Same method as above :).

5

I always thought that without some seriously funky javascript and CSS the button will remain unstyled.#

http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom as an example

6

You can style the buttons but some styles are hard to undo.

Edit: Just as a disclaimer I’m not 100% standing by that statement :).

7

I tested this but it is not working :

CSS
.upload {
border:1px solid #000000;
}

HTML
<input name=“photo” type=“file” class=“upload” id=“photo”>

what is wrong ?

8

right - read this: http://www.quirksmode.org/dom/inputfile.html

Of all form fields, the file upload field is by far the worst when it comes to styling. Explorer Windows offers some (but not many) style possibilities, Mozilla slightly less, and the other browsers none at all. The “Browse” button, especially, is completely inaccessible to CSS manipulation.

9

Add “position:relative;”

Are you SUREE spikez ;)?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style type="text/css">
*{margin:0;padding:0;}
input.upload {
position:relative;border:1px solid blue;}
</style>
</head>

<body>
<input name="photo" type="file" class="upload" id="photo">
</body>
</html>
10

Are you? That isn’t cross-browser compatible and setting a border works fine in IE without the position relative.

The position:relative workaround that Michael mentioned relies on a parent element, <input/> and <img/> and opacity.

11

So whats the solution ?

12

As linked to earlier, look on http://www.quirksmode.org/dom/inputfile.html where it says ‘The Solution’

13

The “Browse” button, especially, is completely inaccessible to CSS manipulation.

I just proved it is not true.

14

Pretty sure Peter meant that in a cross-browser context, and it’s true that its not fully stylizable and its very restricted. Just because Trident lets you set a border doesnt mean its accessible to CSS manipulation as a whole.

15

I think you are true but my statement was just to prove spikez quote wrong. Tridents always funky but sometimes it lets you bend the rules. It wasn’t clear what styles you can put on it but I’d just imagine some sort of mixture of borders/colors/background/margin/padding. Basic stuff.

16

In my opinion…Don’t bother trying to style anything related to form controls. Leave them to the browser and OS. Too many headaches and nightmares trying to get any where with form controls.

17

No actually through JS you can achieve some cool effects: and if they have it disabled oh well. They should expect a worse visit with less tools available to the developer.

18