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.