Applying Styles for File Button

Everyone who works in the front end will be aware of the input type=”file” , the function of this button is that, it will fetch you the file browser, so that you can chose the file for your Upload. Unfortunately, you can have images for these buttons, unlike we have for other Submit kind of buttons. So what can be done for this? There are two solutions,

1.You can find out the code behind of this File button and can implement that procedure in Onclick of this image button.
2.You can have an image Button over a File Button and you can invoke the Click event of the File button from the onclick event of this image buttton. For this you have to play with the z-index property.

we will have a look at the second method, as the first one is very simple.

How to do this?
Change the z-index of the File Button, make it as negative(or a lesser value than image button). I have included the code here, check it out here

<script type=”text/javascript”>
function clickBrowse()
{
document.getElementById(’openssme’).click()
}
</script<
<style type=”text/css”<
input.hide
{

position:relative;
left:-225px;
z-index: -1;
width:0px;
border-width:0px;
}

input.red
{
position:relative;
background-color:#cc0000;
font-weight:bold;
color:#ffffff;
z-index:100;
width:75px;
height:20px;
font-size:10px;
}
</style>

<!–[if IE]>
<style type=”text/css”>
input.hide
{
position:relative;
visibility:hidden;
left:-83px;
z-index: -1;
width:0px;
border-width:0px;
}
</style>
<![endif]–>

<img src=”btn_browse.gif” class=”red” id=”pseudobutton” onClick=”clickBrowse();” />
<input type=”file” class=”hide” id=”openssme”>

We have to handle IE and FF seperately, so a code for IE is placed seperately in this.
I thank Nirmal, for helping me out in this.