how do i style the browse button on a form input type="file"?

[offsprg01]

<input name="uploadedfile" size="32" type="file" />

 

how do style the browse button that appears with this code? i every time i try to assign a class to it, the field gets styled, but not the button.

[tarun]

I Dont Think There Is A Way Of Styling The Actual Browse Button But

You Can Try These If You Want:

 

<style>
<!--
.browse{
  border : 1px #88A0C8;
  font-family: Arial
  font-size: 11px; 
  color: #003068; 
  text-decoration: none; 
  background-color: #E9EDF0
}

//-->
</style>
<input class="browse" name="uploadedfile" size="32" type="file" />

 

 

 

<script type="text/javascript">
function buttonPush (buttonStatus)
  {
  if (buttonStatus == "depressed")
document.getElementById("pseudobutton").style.borderStyle = "inset";
  else
document.getElementById("pseudobutton").style.borderStyle = "outset";
  }
</script>
<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]-->
<input type="button" class="red" id="pseudobutton" value="Open File">
<input type="file" class="hide" id="openssme" onmousedown="buttonPush('depressed');" onmouseup="buttonPush('normal');" onmouseout="buttonPush('phased');">

[AndyB]

Basically, the 'browse' button is beyond your reach in terms of style.

 

Interesting read -> http://www.456bereastreet.com/lab/styling-form-controls-revisited/file-select/

[ToonMariner]

Brilliant site - bookmarked that one - cheers Andy