It seems that it's quite simple to style the buttons on your page... until you get to the browse button. The browse button never changes. Why? Who knows. But it doesn't. I finally found a way to get around it though!
I just figured this out with some help from
Arbitrator (thank you much). In my search I found that a lot of people ask how to do this, so in case anyone wants to know how; here it is.
First you are going to make 2 buttons. One of them will be the button that you want people to see, and the other will be the regular browser button. Make sure you place them in that order and do not put a line break in between
CODE
<input type="button" value="Open File">
<input type="file">
Next give the "pseudobutton" (the button you want to see) the style you want. you also want to assign layers to each button with "z-index". The pseudobutton should be z-index:1 and the browse button should be z-index:2
Note: The browse button is smaller than the usual button. For best results, resize the pseudobutton to match the browse button (width:75px; height:20px). You will have to resize the font too.
Next: You want to move the browse button OVERTOP of the pseudobutton. It should be covering it exactly. In IE you can remove the borders and the change the width to 0 to move it. In other browsers it doesn't appear the same. When you set the position of the browser button, set it EXACTLY over the pseudobutton, then in an IF comment you can set IE properties.
Now that your buttons are positioned, you need to make it so that you can see the pseudobutton. All you need to do is change the opactity (transparency) of the browse button to 0. This enables you to see through the browse button as if it were invisible, but letting you still click on it.
CODE
<style type="text/css">
input.hide
{
position:absolute;
left:-137px;
-moz-opacity:0;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
input.red
{
background-color:#cc0000;
font-weight:bold;
color:#ffffff;
z-index:1;
width:75px;
height:20px;
font-size:10px;
}
</style>
<!--[if IE]>
<style type="text/css">
input.hide
{
position:absolute;
left:10px;
-moz-opacity:0;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
width:0px;
border-width:0px;
}
</style>
<![endif]-->
<body>
<input type="button" class="red" id="pseudobutton" value="Open File">
<input type="file" class="hide" id="openssme">
</body>
For added style to complete the button and make it all convincing, you need to make the button invert, like a normal button does. You will need a little piece of javascript for this.
First give each button an ID. Then you will use the javascript to change the border-style of the pseudobutton, when clicking on the browse button.
CODE
<script type="text/javascript">
function buttonPush (buttonStatus)
{
if (buttonStatus == "depressed")
document.getElementById("pseudobutton").style.borderStyle = "inset";
else
document.getElementById("pseudobutton").style.borderStyle = "outset";
}
</script>
Make sure you add the appropriate javascript in with the button to make it call the function!
CODE
<input type="file" class="hide" id="openssme" onmousedown="buttonPush('depressed');" onmouseup="buttonPush('normal');" onmouseout="buttonPush('phased');">
Now your button should work just like a regular button, but it's not! yay!!
Below is a sample of the code to play with.
Styling A File Browse Button, for <input type="file"> button
10 Apr, 2006 - 11:02 AM
| 