CSS: 如何使输入文件的光标变为指针？

Question

当鼠标悬停在输入文件或输入文本上时，我应该如何使光标变为指针？

这是我的尝试，但显然不起作用：

<input type="file" style="cursor: pointer;"/>

我需要使用 JavaScript（jQuery）吗？ 编辑： 抱歉，我的错误-光标确实会在...上变成一个点。

<input type="text" style="cursor: pointer;"/>

但不包括

<input type="file" style="cursor: pointer;"/>

您可以在Firefox上测试此链接，然后您就会明白我的意思。

只有文件的按钮变成了指针，而不是文件的输入框。 编辑2： 这里是我的CSS“hack”，点击此处。

<div id="right-col" style="position:relative; width:76px; height:24px; overflow:hidden; border:1px solid #000;">
<input type="file" style="position:absolute; top:0; right:0; z-index:2;opacity:1; cursor:pointer;"/>
</div>

- Run

---

当你将鼠标悬停在按钮上时，它会变成“input type =”file“”的指针，而当你将鼠标悬停在文本字段上时，它会变成“input type =”text“” 的指针。 - BoltClock

是的，它在按钮上，但不是当你将鼠标悬停在“文件”的“输入字段”上时。 - Run

不要相信这是可能的。但是，你到底为什么想要那样做呢？文本光标的作用是显示你可以在那里输入文本... - animuson

基本上它是浏览器实现特定的，而不在您的控制范围内。 - Joseph Marikle

当您单击文件输入框内的文本字段时，它会像单击按钮一样运行，因此最好在文本字段上看起来与按钮相同。但是，在Firefox中无法修复。可以使用::-webkit-file-upload-button { cursor: pointer } 在Chrome中修复。 - oldwizard

也许这会有所帮助：https://dev59.com/QnI_5IYBdhLWcg3wEe1u#23860302 - Endless

Answer 1

无法完成。输入类型文件是浏览器中受到最严格保护的对象之一。某些浏览器允许您执行比其他浏览器更多的操作，这取决于它们认为什么是“安全”的。

您可以使用Flash按钮来实现上传。实际上，有很好的插件可用以使文件上传变得更加美观，例如Uploadify。

- IOrlandoni

---

那不是为输入文件添加样式，而是将其隐藏。 - IOrlandoni

Answer 2

你可以使用这个不太美观的jQuery技巧：

$('input:file').each(function(){
    var $input = $(this);
    $input.before($('<div>').height($input.height()).width($input.width()).css(
        {
            cursor: 'pointer',
            position: 'absolute',
            zIndex: $input.css('z-index')
        }).click(function(){
            $(this).hide();
            $input.click();
            $(this).show();
        }));
});

但是，它防止了您在按下按钮元素时通常看到的动画效果。 JSFiddle

- Paul

---

谢谢。一个很好的技巧，但在Opera上不起作用 - 对话框弹出窗口不再显示。请查看我上面的编辑以获取我的解决方案。谢谢。 - Run

Answer 3

将输入框的role="button"属性赋值给它。

- the_flucs

---

你能详细解释一下为什么这个方法有效吗？这样可以让提问者和社区受益。 - mjk

很抱歉，@mjk，我不能这么做。我在遇到同样的问题时遇到了这个问题，并思考了解决方案。由于你的评论，我有时间更深入地研究HTML中的角色，并实际上找不到与css有任何关系。我个人将 role=button 分配给输入，因为在我的代码中该输入具有该角色（从可访问性和语义方面是正确的）。此外，当没有其他方法可行时，它还解决了向用户视觉指示该输入实际上是一个按钮（使用cursor: pointer）的问题。如果您知道更多，请分享。 - the_flucs

Answer 4

不是这样的... 这才是正确的方法。请参考这里。

- Joseph Marikle

---

我正在使用Firefox 6，它只适用于按钮，而不适用于旁边的文本字段。 - animuson

在IE中测试过了，它可以工作，在Chrome中也可以，但在Firefox中不行。听起来像是Firefox的一个bug。 - animuson

Answer 5

您可以尝试使用而不是任何包装器。

<label for="photo"><span class="button">CHOOSE A FILE</span></label>

请查看这个链接... http://jsfiddle.net/pFK74/

- Imran

Answer 6

你可以放置一张图片，像这样：

HTML：

<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1"  name="file1" style="display:none" />

JQuery：

$("#upfile1").click(function () {
    $("#file1").trigger('click');
});

注意：在IE9和IE10中，如果您通过JavaScript触发文件输入的onclick事件，则表单将被标记为“危险”，并且无法使用JavaScript提交，不确定是否可以传统提交。

- ParPar