Question

如何将cursor:pointer;设置为输入文件字段？

HTML

  <form id="up_1" name="up_1" action="" enctype="multipart/form-data" method="post">

    <div style="position: relative;">

      <input id="file_input" type="file" name="file_input" style="position: relative; text-align: right; opacity: 0; z-index: 2;" />

        <div id="ico_hdd" style="position: absolute; top: 0px; left: 0px; z-index: 1;">
        <img src="http://img834.imageshack.us/img834/9831/iconhdd.png" style="margin-bottom: -4px;"/>
      </div>

    </div>

  </form>

工作 - ＆gt; http://jsfiddle.net/tPvJJ/

提前致谢！
彼得

Answer 1

在我测试的每个浏览器中（Chrome，FF和IE）都没有，甚至在包含在具有cursor属性的父元素中时也是如此。可能出于安全原因，使用自定义游标或空游标或其他任何东西来抢占恶作剧。

你可以放a transparent DIV on it并给游标属性，但当然输入字段不再可点击了。

Answer 2

我认为你要做的事情是不可能的。

这是一个有效的解决方法：http://jsfiddle.net/tPvJJ/10/

仅在Safari中测试过，但我没有看到任何其他浏览器无法使用的原因。

HTML

<form id="up_1" name="up_1" action="" enctype="multipart/form-data" method="post">
    <input id="file_input" type="file" name="file_input" style="opacity: 0.2;">

    <div id="ico_hdd" style="cursor: pointer;">
        <img src="http://img834.imageshack.us/img834/9831/iconhdd.png"> 
    </div>

</form>

JS

$(function() {
    $('#ico_hdd').click(function(e){
        $('#file_input').trigger('click');
    });
});

Answer 3

好的，这是不可能的：（

创建可点击浏览器按钮的唯一方法是......“flash”。

例如 - ＆gt; http://imageshack.us/

Answer 4

适用于FF，Chrome和IE 7,8,9

HTML

<input id="file_input" type="file" name="file_input" style="visibility:hidden;">
<div id="ico_hdd" style="cursor: pointer;"> <img src="http://img834.imageshack.us/img834/9831/iconhdd.png"> Dodaj plik </div>

jquery的

$('#ico_hdd').on("click", trigbutton);
function trigbutton(){
$('#file_input').trigger('click');
}

Answer 5

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

代替任何包装器

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

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

Jquery - 文件输入上的光标指针，可能吗？

5 个答案: