4

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

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

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

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

编辑：

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

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

但不上

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

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

只有buttonoffile改变了指针，而不是input fieldof file。

编辑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>
4

6 回答 6

4

无法完成。输入类型文件是浏览器最受保护的对象之一。一些浏览器允许你做比其他浏览器更多的事情，这取决于他们认为什么是“安全的”。

您可以使用闪光灯按钮。事实上，有一些非常好的插件可以让文件上传变得更好，比如Uploadify。

于 2011-08-23T02:05:44.010 回答
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

于 2011-08-23T02:00:25.533 回答
1

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

于 2011-08-23T01:34:02.197 回答
1

分配给输入role="button"

于 2020-11-04T14:46:03.987 回答
0

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

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

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

于 2014-05-14T10:51:04.377 回答
0

您可以改为放置图像，并这样做：

HTML：

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

查询：

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

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

于 2014-01-28T05:16:36.767 回答