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

Работает в 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 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".

Для примера -> http://imageshack.us/

Answer 4

В каждом браузере, который я тестировал (Chrome, FF и IE), нет, даже если обернут в родительский элемент, который имеет свойство курсора. Вероятно, из соображений безопасности, для вытеснения махинаций с помощью пользовательских курсоров или пустых курсоров или чего-либо еще.

Вы можете поместить прозрачный DIV и присвоить этому свойство курсора, но тогда поле ввода больше не будет активным, конечно.

Answer 5

Вы можете попробовать вместо любой оболочки тип ввода "file".

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

Проверить это ... http://jsfiddle.net/pFK74/