Styling “input file” - works great, but there is a little annoying problem

I'm using Firefox 3.6.6.

I styled my "input file" that looks like this:

Here is the code: (live example here)

HTML:

<div id="wrapper">
    <div id="customButton">
        <img src="http://i28.tinypic.com/2nv5lww.png" />
        <span>Choose Files</span>
    </div>
    <input id="fileInput" type="file" size="1" />
</div>

CSS:

#wrapper {
    position: relative;
    width: 339px;
    height: 66px;
    background: -moz-linear-gradient(-70deg, 
                                     rgba(1, 36, 68, 0.9), 
                                     rgba(10, 103, 196, 0.9));
    -moz-box-shadow: inset -20px -20px 20px -20px rgba(0, 0, 0, 0.9), 
                     inset 20px 20px 20px -20px rgba(255, 255, 255, 0.7);
}
#fileInput {
    opacity: 0;
    font-size: 50px;
}
img {
    width: 45px;
    height: 45px;
    position: absolute;
    left: 35px;
    top: 12px;
}
span {
    position: absolute;
    left: 95px;
    top: 7px;
    font-size: 40px;
    color: white;
}

The only problem is that when the mouse is over this custom button, the cursor changes between text and default because of 开发者_Go百科the underlying "input file" (which is not visible).

Does anyone has an idea how could I set the cursor to pointer, for example, when the mouse hovers the button ?

Thanks a lot !!

<input id="fileInput" style="display: none;" type="file" size="1" />

it seems to be working with you hide it and put cursor:pointer to wrapper