input type=file button color

Ron Brennan · May 9, 2004

Good evening.

How can I change the background color of the browse button generated by the
following element?

<INPUT TYPE='file' NAME='test'>

Thank you,
Ron.

Sid Ismail · May 9, 2004

: Good evening.
:
: How can I change the background color of the browse button generated by the
: following element?
:
: <INPUT TYPE='file' NAME='test'>

Try inserting
style="background-color:green;"
before >

Sid

Ron Brennan · May 9, 2004

No, that won't work. The browse button of the "input type=file" is
different.

Thanks for the suggestion though.

mscir · May 9, 2004

Ron said:
No, that won't work. The browse button of the "input type=file" is
different.

Thanks for the suggestion though.

There's a working example here:

http://www.experts-exchange.com/Web/Web_Languages/HTML/Q_20396596.html

Mike

Jukka K. Korpela · May 9, 2004

mscir said:
There's a working example here:

http://www.experts-exchange.com/Web/Web_Languages/HTML/Q_20396596.html

No, it is an example of turning something that works (to the extent that
file submission can work at present) into something that fails to work in
a wide range of situations (including all situations where JavaScript is
disabled, filtered out by a company firewall, not supported etc.).

To do that for the sake of coloring a button is undescribably foolish.

mscir · May 9, 2004

Jukka said:
No, it is an example of turning something that works (to the extent that
file submission can work at present) into something that fails to work in
a wide range of situations (including all situations where JavaScript is
disabled, filtered out by a company firewall, not supported etc.).

To do that for the sake of coloring a button is undescribably foolish.

You raise a valid point... How about this approach.

The onclick event is processed without javascript, is this correct? So
how about positioning a div over the button, making it look any way the
OP likes, then clicking the browse button in the div onclick event?

<style type="text/css">
..uploadbox {
font-family: verdana, arial, sans-serif;
font-size: 100%;
color: #800000;
font-weight: normal;
border: #797979 1px solid;
background-color: #ffddbb; //tan
border-color: brown;
width: 292px;
height: 22px;
}
div {
position: absolute;
top: 16px;
left: 205px;
height: 16px;
width: 99px;
font-size: 90%;
background-color: brown;
color: white;
padding: 2px;
z-order: 100;
cursor: hand;
cursor: pointer;
font-weight: bold;
}
</style>
</head>

<body>
<input type="file" class="uploadbox">
<div onclick="fileselect.click();">Select a File...</div>

Mike

Toby A Inkster · May 9, 2004

mscir said:
The onclick event is processed without javascript, is this correct? So
how about positioning a div over the button, making it look any way the
OP likes, then clicking the browse button in the div onclick event?

That might work, but use JavaScript to position the <div> instead.

Also, you may get into trouble with the way that some browsers display
form elements (they sometimes put them at an infinitely high z-index).

Changing a background-color	2	Aug 2, 2023
Can I modify the tooltip display on an <input type="xx"> statement?	2	Oct 22, 2023
Make an <input type="text"> input-ready for input	8	Aug 17, 2023
How to position the tooltip comment on these buttons?	9	Nov 4, 2023
"input-group-text" help	7	Aug 10, 2023
Problems with using event handlers for button and textarea input	1	Nov 29, 2021
Radio button inside input element	3	Mar 29, 2023
<Button ...> display is fine, except for two things	1	Oct 23, 2023

input type=file button color

Ron Brennan

Sid Ismail

Ron Brennan

mscir

Jukka K. Korpela

mscir

Toby A Inkster

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads