Question

当你将鼠标悬停在光盘上时，如何让光标成为输入文件或输入文本的指针？

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

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

或者我必须使用javascrip（jquery）??

修改

抱歉我的错误 - 光标确实变为

上的某个点

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

但不是

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

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

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

编辑2：

Here是我的CSS'黑客'，

<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>

Answer 1

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

您可以使用 flash 按钮。事实上，有很好的插件可以使文件上传更好，例如Uploadify。

Answer 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

Answer 3

不......那就是你做的。比较here。

Answer 4

您可以改为放置图片，并按照以下方式进行操作：

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');
});

<强> CAVEAT ：在IE9和IE10中，如果您通过javascript触发文件输入中的onclick，表单会被标记为“危险”并且无法使用javascript进行下限，不确定是否可以提交传统。

Answer 5

您可以尝试使用输入类型＆＃34;文件＆＃34;。

代替任何包装器

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

检查一下...... http://jsfiddle.net/pFK74/

Answer 6

分配给输入role="button"

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

6 个答案: