Custom button for file input

can it be changed?

[mattglet]

Is it possible to have a custom button for the <input type = "file">? I've never come across this before...

-Matt

[txbakers]

I've only been able to modify the look of the button with CSS, but it always says Browse.

[moltar]

How do you customize the look of the button? I can't figure out how to refer to the button in CSS. When I say "background:" - it only changes background of the input field.

[mattglet]

You actually have to put the class inside the input tag:

<input type = "button" class = "yourButtonStyle" value = "Text!">

-Matt

[moltar]

But there is no separate button in the <input type="file" /> . You declare "file" type and it automatically adds the text and the button fields.

[mattglet]

Exactly, which is my first question (sorry I thought you were talking about buttons in general). I don't think it's possible.

-Matt

[moltar]

But txbakers was able to modify the look of the "browse" button with CSS. I wonder how can that be done?

[txbakers]

<input type="file" class="inputsubmit" name="thefile">

this takes on the attributes of my inputsubmit class for the text box portion, and also modifies the button, but now exactly how I want it.

It works for me though.

[mattglet]

.styINPUT
{
BORDER-RIGHT: #000000 1px solid;
BORDER-TOP: #000000 1px solid;
FONT-SIZE: 12px;
BORDER-LEFT: #000000 1px solid;
WIDTH: 200px;
COLOR: #000000;
BORDER-BOTTOM: #000000 1px solid;
FONT-FAMILY: Verdana, Arial, sans-serif;
BACKGROUND-COLOR: #ffffff
}

<input type="file" class="styINPUT" name="YourFile">

That should change it up for you. You can mess with the settings to make it do what you need to, but as you know, it's quite limited.

-Matt

[moltar]

So, there is no way to change background of the button? This code example does not change BG of the button itself, only the text field. (in IE6)

[mattglet]

It appears to be correct, that you cannot change the BG color of the Browse button.

-Matt

[dcrombie]

The text and placement of the button varies between browsers and operating systems.

In Safari (Mac) you currently get a button [Choose File] followed by the text "no file selected". Once a file is selected, the text is replace by an icon and filename - so there's not even a text-input box to format.