Styling file upload field and browse button

Hey guys,

I am trying to create a better file upload field and browse button, rather than the naff default button and field that are used by the browser...

I ahve research this, and it seems that it VERY DIFFICULT to style this, most examples use javaScript, which im not really too experienced in to understand how to code it, i get the basics of the code and what it does, but not how to edit or anything.

The example i have been using is from the url:http://www.quirksmode.org/dom/inputfile.html which the seems to be the most popular method, as just CSS techniques dont allow you to show the file that has been selected in your field box.

I have tried the example with javascript, in a separate [age, as i dont want to add it to my webpage and css untill i see it working on its own. I tried it, and guess what.....it doesnt work!!

here is the code (i put the styling on the same page just for this example):

file upload example

div.fileinputs {
position: relative;
}

div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}

input.file {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}

var W3CDOM = (document.createElement && document.getElementsByTagName);

function init() {
if (!W3CDOM) return;
var fakeFileUpload = document.createElement('div');
fakeFileUpload.className = 'fakefile';
fakeFileUpload.appendChild(document.createElement('input'));
var image = document.createElement('img');
image.src='Images/cancelLogo.png';
fakeFileUpload.appendChild(image);
var x = document.getElementsByTagName('input');
for (var i=0;i

at the moment i get a blank screen, but the field is there, as if you click around, the windows explorer window pops up to select your image....

can someone help me?

cheers

Craig