Jquery - Cursor pointer on a file input, possible?

问题

how can i set the cursor:pointer; to an input file field?

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>

working -> http://jsfiddle.net/tPvJJ/

Thanks in advance!
Peter

回答1:

In every browser I tested (Chrome, FF and IE) no, not even when wrapped in a parent element that has the cursor property. Probably for security reasons, to preempt shenanigans with custom cursors or empty cursors or whatever.

You could put a transparent DIV on it and give that the cursor property, but then the input field won't be clickable any more, of course.

回答2:

I think what you are trying to do is impossible.

Here is a working workaround though: http://jsfiddle.net/tPvJJ/10/

Only tested in Safari but I don't see any reasons why it shouldn't work in any other browser too.

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>

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

回答3:

Ok, it is not possible :(

The only way to create a clickable browser button is .... "flash".

For exmaple -> http://imageshack.us/

回答4:

Works in FF, Chrome and 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');
}

回答5:

You can try instead of any wrapper for input type "file".

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

Check this ... http://jsfiddle.net/pFK74/

来源：https://stackoverflow.com/questions/4112643/jquery-cursor-pointer-on-a-file-input-possible

标签

jquery

html

css

input

cursor