css - 样式化“输入文件” - 效果很好，但有一点烦人的问题

Question

我正在使用Firefox 3.6.6。

我将我的“输入文件”设置为如下所示：

这是代码：（此处为现场示例）

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;
}

唯一的问题是，当鼠标悬停在这个自定义按钮上时，光标会在底层“输入文件”（不可见）text之间发生变化。default

有谁知道我如何将光标设置为pointer，例如，当鼠标悬停按钮时？

非常感谢 ！！

Answer 1

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

它似乎正在与您一起隐藏它并将光标：指向包装器的指针