CSS: Как сделать курсор, чтобы стать указателем на входной файл? - PullRequest
Новая
       15

CSS: Как сделать курсор, чтобы стать указателем на входной файл?

3 голосов
/ 23 августа 2011

Как сделать так, чтобы курсор стал указателем на входной файл или вводимый текст при наведении на него курсора?

Моя попытка, но она, конечно, не работает, 

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

Или я должен использовать javascrip (jquery) ??

РЕДАКТИРОВАТЬ:

Извините, моя ошибка - курсор изменится на точку на 

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

Но не на 

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

Вы можете проверить эту ссылку на Firefox, тогда вы поймете, что я имею в виду.

Только button из file изменить указатель, но не input field из file.

РЕДАКТИРОВАТЬ 2:

Здесь это мой 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>

Ответы [ 5 ]

4 голосов
/ 23 августа 2011

Невозможно сделать. Файл типа ввода является одним из наиболее защищенных объектов браузерами. Некоторые браузеры позволяют вам делать больше вещей, чем другие, в зависимости от того, что они считают «безопасным».

Вы можете использовать кнопку flash . На самом деле, есть очень хорошие плагины, написанные для лучшей загрузки файлов, такие как Uploadify .

2 голосов
/ 23 августа 2011

Вы можете сделать этот уродливый взлом jQuery: 

$('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

1 голос
/ 23 августа 2011

Нет ... вот как ты это делаешь. Сравните здесь .

0 голосов
/ 14 мая 2014

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

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

Отметьте это ... http://jsfiddle.net/pFK74/

0 голосов
/ 28 января 2014

Вместо этого вы можете поместить изображение и сделать это так:

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, если вы запускаете onclick в файле, вводимом через javascript, форма помечается как «опасная» и не может быть передана с помощью javascript, нет уверенности, что она может быть представлена ​​традиционным способом.

...