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

Posted

技术标签:

【中文标题】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 然后你就会明白我的意思了。

只有filebutton 更改为指针,而不是fileinput 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" 的指针。 是的,它在按钮上,但当您将鼠标悬停在 fileinput 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/

【讨论】:

以上是关于CSS:如何使光标成为输入文件上的指针?的主要内容,如果未能解决你的问题,请参考以下文章

使光标转向 .jqxgrid 列标题上的指针

Html和CSS如何使具有悬停效果的图像成为超链接

如何使“真正透明”的窗口成为光标,最好是在纯 QML 上? (Qt 5.7)

如何获取光标:嵌入对象上的指针?

如何在Vuetify组件中将光标默认更改为指针

如何使用jQuery将光标从指针更改为手指?