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

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>

工作 -> http://jsfiddle.net/tPvJJ /

提前致谢！
彼得

Answer 1

在我测试的每个浏览器（Chrome、FF 和 IE）中都没有，即使包装在具有光标属性的父元素中也是如此。可能是出于安全原因，用自定义光标或空光标或其他什么来预防恶作剧。

您可以在上面放置一个透明的 DIV 并为其指定光标属性，但当然，输入字段将不再可单击。

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

例如maple -> 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

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

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

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