Change text properties in <input type=file>

[wavesurf]

Does anyone know if or how one can change the text properties of the browse button that pops up next to the input field.

I'd like to both change the "browse" text and the style of the text.

Thanks a lot for any help.

[dcrombie]

I doubt you can change what the button says - in Safari it's "Choose File" and in Lynx "[FILE INPUT] (not implemented)".

It might be possible to change the button style (in some browsers) by overriding some FORM or ELEMENT styles...

[spud01]

also will adding a new target window work as well?

I have a voting for in a frame for the site and i like it to open in another window when a user submits a vote ie

<input target=ad_window>

[dcrombie]

AFAIK the only elements that have targets are FORMs and links:

<FORM method="..." action="..." target="_blank">
...
</FORM>

<A href="..." target="_blank">...</A>

[DrDoc]

...and image map areas:

<area ... target="">

[wavesurf]

OK, I don't suppose it is vital to change the actual button text, but if I don't get to change the button style, it will screw up the entire design, by having a different style than my other buttons (submit and reset) and input fields...

So, if someone could assist me in overriding some FORM or ELEMENT styles to change my <input type=file> button, I would be forever grateful?

Also, would it be possible, to change the button into an image?

Thanks a lot for any help.

[DrDoc]

There's no way you can change the way the "browse" button looks, the text on it, or replace it with an image. There are no solutions, and no workarounds. Sorry ;)

But Welcome to Webmaster World! :)

[wavesurf]

Thanks for the answer. No chance of misinterpreting that one :)

Do you by any chance know why they haven't (in the CSS standard) opened for modification of that button, since it is an important part of the design, and it is about the only element that can't be modified in one way or another.

[Stretch]

DrDoc, I think you can change it a bit. This sets a style that changes the look of the input area and the button:

Add a class to the input type:

<input type="file" class="uploadbox" name="whatever">

And include a class like this in your CSS:

.uploadbox {
font-family: verdana, arial, sans-serif;
font-size: 75%;
color: #797979;
font-weight: normal;
border: #797979 1px solid;
background-color: #ffffff;
width: 292px;
height: 17px;
}

Probably IE only but seems to work for me.

[DrDoc]

The only thing it changes is the button border. You cannot change the text, background color, or anything else. Just the border.

Do you by any chance know why they haven't (in the CSS standard) opened for modification of that button, since it is an important part of the design, and it is about the only element that can't be modified in one way or another

They have... But the reason why you can't style it is because the button "doesn't exist". It is generated by the OS, not the browser.

[Stretch]

The border and the height :-)

[wavesurf]

Thanks for all the input on this. It was very helpful to get the explanations from all of you.

I can't say I'm still not a bit surprised why the button is not available for extensive customization, even though it is delivered by the OS and not the browser. But at least I now know why it is how it is, and I can relax about it.

Only thing is, I have to customize my design to suit the stupid browse button :) But that can be done...