Style Uploadify Browse Files Button with CSS

By Hawkee on Mar 30, 2012

This will allow you to style the Uploadify upload button. Normally this button is generated through the flash object, so it's a bit tricky replacing it with a CSS button. You have to use the proper parameters to make the flash object transparent and position a CSS button over your text while positioning the flash object over the CSS button. Here is the HTML:

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

The CSS makes #uploadify_button fill the space of #uploadify while the JavaScript parameters need to be fine tuned to fill the space.

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

The width and height are very important here because they determine the size of the flash object. You need to adjust these values according to the text you used in your #uploadify div.

And finally the CSS is below. You style the #uploadify div any way you'd like while "#uploadify object" fills the relative space with itself so the flash object can overlay the button you created.

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

#uploadify:hover { 
background: #B33C00; 
}

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

Comments

Sign in to comment.
Hawkee   -  Mar 30, 2012

You can see this in action when posting a snippet from the homepage. The "Upload Screenshots" button is actually an invisible flash overlay.

 Respond  
Are you sure you want to unfollow this person?
Are you sure you want to delete this?
Click "Unsubscribe" to stop receiving notices pertaining to this post.
Click "Subscribe" to resume notices pertaining to this post.