CSS：如何使光标成为输入文件上的指针？

Posted 2023-04-18

【中文标题】CSS：如何使光标成为输入文件上的指针？

【英文标题】：CSS: How make the cursor to become a pointer on the input file?

【发布时间】：2011-11-01 14:14:11

【问题描述】：

当您将光标悬停时，如何使光标成为输入文件或输入文本上的指针？

我的尝试，但它当然不起作用，

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

还是我必须使用 javascrip (jquery)？？

编辑：

对不起，我的错误 - 光标确实变成了一个点

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

但不在

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

你可以在 Firefox 上测试this link 然后你就会明白我的意思了。

只有file 的button 更改为指针，而不是file 的input field。

编辑 2：

Here 是我的 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>

【问题讨论】：

当您将鼠标悬停在按钮上时，它会成为input type="file" 的指针，当您将鼠标悬停在文本字段上时，它会成为input type="text" 的指针。

是的，它在按钮上，但当您将鼠标悬停在 file 的 input field 上时，它不在。

不要相信这是可能的。但是为什么你会想要这样做？文本光标的点是表明您可以在那里输入文本...

基本上它是特定于浏览器实现的，不受您的控制。

当您单击文件输入中的文本字段时，它的行为就像您单击了按钮一样，因此在文本字段上看起来与在按钮上看起来一样。但可惜在 Firefox 中无法修复。可以在 Chrome 中使用 ::-webkit-file-upload-button cursor: pointer

修复

【参考方案1】：

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

您可以使用 flash 按钮。其实有很多不错的插件可以让上传文件变得更好，比如Uploadify。

【讨论】：

这不是输入文件的样式，而是隐藏它。

【参考方案2】：

你可以做这个丑陋的 jQuery hack：

$('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

【讨论】：

谢谢。一个很好的技巧，但它不适用于歌剧 - 对话框弹出不再显示。请参阅上面的编辑以获取我的解决方案。谢谢。

【参考方案3】：

不……这就是你的做法。比较here。

【讨论】：

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

所以在 IE 中测试，它可以工作，Chrome，它可以工作，Firefox，它不工作。听起来像一个 Firefox 错误。

【参考方案4】：

分配给输入role="button"

【讨论】：

您能否详细说明为什么这样做是为了提问者和社区的利益？

@mjk，不幸的是我不能。当我遇到同样的问题并想写出对我有用的东西时，我遇到了这个问题。感谢您的评论，我有时间更多地研究 html 中的角色，实际上我找不到与 css 的任何关系。我个人将role=button 分配给输入，因为在我的情况下，输入在我的代码中具有该作用（从可访问性和语义方面来看是正确的）。另外，它解决了我在视觉上向用户指示这实际上是一个按钮（带有光标：指针）的问题，而其他任何东西都不起作用。如果您知道更多，请分享。

【参考方案5】：

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

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 提交，不确定是否可以传统方式提交。

【参考方案6】：

您可以尝试代替输入类型“文件”的任何包装器。

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

检查这个... http://jsfiddle.net/pFK74/