Question

我正在使用 Firefox 3.6.6 。

我设置了我的“输入文件”，如下所示：

http://i32.tinypic.com/xfayxs.jpg

以下是代码:(实例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;
}

唯一的问题是，当鼠标悬停在此自定义按钮上时，由于底层的“输入文件”（不可见），光标会在text和default之间切换。

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

非常感谢!!

Answer 1

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

它似乎与你一起隐藏它并将光标：指针放到包装器

造型“输入文件” - 效果很好，但有一点恼人的问题

1 个答案: