遵循此 question 中的 CSS 样式技巧我能够创建自定义上传按钮。现在,挑战是让按钮的整个部分将鼠标指针图标变为手形图标。
可以看到我部分实现的方式here (jSFiddle) .如您所见,当鼠标悬停在按钮的右侧区域时,光标只是看起来像一只手(我使用的是最新版本的 firefox)。
<span id="uploadMask">
<input type="file" multiple="multiple" name="file" id="file_upload">
<span class="button">Select Documents</span>
</span>
#uploadMask {
width:160px;
display: block;
float:left;
overflow: hidden;
height:32px;
margin-right: 5px;
position: relative;
}
#uploadMask input {
position: absolute;
top:0;
bottom: 0;
right:0;
opacity: 0;
z-index: 2;
cursor: pointer;
}
#uploadMask .button {
background:#ccc;
line-height:24px;
padding:5px 15px;
display:block;
}
有什么想法吗?
最佳答案
你无能为力似乎得到了cursor
处理 <input type="file">
的“文本”部分的属性, 但“按钮”部分确实显示手形指针。
红色部分没有手形光标!
借用这个问题的解决方案:
Is there a way to make the native `browse` button on a file input larger cross browser?
您可以通过添加以下内容来放大按钮大小:
#uploadMask input {
font-size:200px; /* Any high number to guarantee it's big enough,
overflow:hidden on the parent takes care of the rest */
}
关于带有手形光标悬停的 HTML 自定义上传按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9562964/