Uploadify button: Style with CSS?

Question

Is it possible to replace the Uploadify button (which is a graphic containing up/over/down states) with a simple CSS-styled button?

Answer 1

Evan was very close, but I needed to make some adjustments for it to work correctly. Here is what I ended up using:

CSS:

#uploadify { 
background: #FF5500; 
border-radius: 5px; 
}

#uploadify:hover { 
background: #B33C00; 
}

#uploadify object { 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 25px;
}

You probably want to fine tune the height here because it does matter. Also, I aligned it from the top and left rather than left and right from the other example. I left a little styling in there as an example of how you can style the button wrapper.

HTML:

<div id="uploadify" style="position: relative;">   
  Upload Screenshots
  <div id="uploadify_button" type="button"></div>
</div>

The relative position is important for the absolute positioned button inside.

JavaScript:

$("#uploadify_button").uploadify({                     
  'hideButton' : true,                                
  'wmode'      : 'transparent',
  'uploader'   : '/static/uploadify/uploadify.swf',
  'script'     : '/static/uploadify.php',
  'folder'     : '/_uploads',         
  'multi'      : true,
  'width'      : '140',
  'height'     : '25'
});

The width and height are very important as they determine the actual clickable region within the button div. I found that without these it's only clickable in a certain area.

Answer 2

For Uploadify version 3.2.1, You can edit stylesheet file uploadify.css in this classes:

• .uploadify-button
• .uploadify:hover .uploadify-button

In my case, I comment all styles of them to remove background and border of button and default button was hide completely.