Uploadify button: Style with CSS?

I was able to get away with something massively more simple.

xhtml:

<div id="uploadify">                  
  Upload Pictures                     
  <div id="uploadify" type="button" />
</div>                                

css:

#uploadify object { 
  position:absolute;
  left:0; right:0;  
  width:100%        
}                   

javascript:

$("#uploadify>div").uploadify({                     
  'hideButton'   : true                                
  , 'wmode'      : 'transparent'                         
  , 'uploader'   : '/static/uploadify/uploadify.swf'
  , 'script'     : '/static/uploadify.php'          
  , 'folder'     : '/_uploads'                      
  , 'multi'      : true                             
})                                                  

// If you're using jQuery UI.
$("#uploadify").button(); 

Probably a little easier, now that we have hideButton: true, not sure if @Herb knew about it.

UPDATE I wrote this answer in July of 2010. It's now March of 2013. HTML5 supports multiple file-uploads. Don't use uploadify at all; I don't.

I've been able to come up with a working solution to this. Here's the basic outline:

• Disable the Uploadify button image buttonImg: " "
• Make the flash object transparent wmode:"transparent"
• Using CSS, position a fake styled button or a tag behind the flash object
• After initializing Uploadify, set the width and height of the object to match the button behind it

The flash object will shield the button underneath it from mouseover etc. events; so to get hover effects, you'll need to take a couple of additional steps:

• Wrap both the button and the upload object in a div
• After initializing Uploadify, set the width and height of the wrapper div to match the button
• You can then use jQuery to handle the .hover() events on the wrapper div and apply styles to the button

Putting it all together:

HTML

<div class="UploadifyButtonWrapper">
    <a>Upload Files</a>
    <div class="UploadifyObjectWrapper">
       <input type="file" id="Uploadify" name="Uploadify" />
    </div>
</div>

CSS

div.UploadifyButtonWrapper{
    position:relative;
}

/* fake button */
div.UploadifyButtonWrapper a {
    position:absolute; /* relative to UploadifyButtonWrapper */
    top:0;
    left:0;
    z-index:0;
    display:block;
    float:left;
    border:1px solid gray;
    padding:10px;
    background:silver;
    color:black;
}

/* pass hover effects to button */
div.UploadifyButtonWrapper a.Hover {
    background:orange;
    color:white;
}

/* position flash button above css button */
div.UploadifyObjectWrapper {
    position:relative;
    z-index:10;
}

Javascript:

$("input.Uploadify", self).uploadify({
    ...
    buttonImg: " ",
    wmode: "transparent",
    ...
});
var $buttonWrapper = $(".UploadifyButtonWrapper", self);
var $objectWrapper = $(".UploadifyObjectWrapper", self);
var $object = $("object", self);
var $fakeButton = $("a", self);
var width = $fakeButton.outerWidth();
var height = $fakeButton.outerHeight();
$object.attr("width", width).attr("height", height);
$buttonWrapper.css("width", width + "px").css("height", height + "px")
$objectWrapper.hover(function() {
    $("a", this).addClass("Hover");
}, function() {
    $("a", this).removeClass("Hover");
});

Why not just put a Wrapper around it like this:

<div class = "uploadWrapper"><input id="file_upload" name="file_upload" type="file" /></div>

Style it like this:

.uploadWrapper object {background-color: red;}
.uploadWrapper object:hover {background-color: blue;}

And use the following script:

<script type="text/javascript">
$(document).ready(function() {
  $('#file_upload').uploadify({
    'hideButton': true,
    'wmode'     : 'transparent',
    'uploader'  : '/uploadify/uploadify.swf',
    'script'    : '/uploadify/uploadify.php',
    'cancelImg' : '/uploadify/cancel.png',
    'folder'    : '/uploads',
    'auto'      : true
  });
});
</script>

Works for me ;) ... and of course you can just use background-images instead of the colors.