Подтвердить что ты не робот

Измените тип курсора на input type="file"

Простой вопрос... Как изменить тип курсора на тип ввода файла?

Я пробовал следующее:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <style>
            input[type="file"] {
              cursor: pointer;
            }
        </style>
    </head>
    <body>
        <input type="file">
    </body>
</html>

По какой-то причине он не будет играть в мяч.

4b9b3361

ОТВЕТЫ

Ответ 1

Я сделал решение с jquery здесь: http://jsfiddle.net/gKVKm/36/

Посмотрите здесь, чтобы узнать, что происходит:

Это работает для меня в Opera, Safari, IE, Chrome и Firefox.

Ответ 2

В разных браузерах он работает по-разному. Я предполагаю, потому что тип ввода файла довольно особенный.

Какой браузер/версия вы используете?

Я знаю, что IE6 не поддерживает указание типа в стиле.

Как это работает в разных браузерах

IE7 +

Работает отлично.

FireFox

Проблема исправлена, поэтому теперь она работает отлично. См. отчет об ошибках по этой проблеме.
В версии 3.5 он вообще не работал.

Chrome и Safari (идентичное поведение)

Использует стрелку над кнопкой, но ваш выделенный курсор над остальными.

Opera

Работает отлично.

Обратите внимание, что существует несколько обходных решений, использующих разные методы, которые будут возникать вокруг этой проблемы. ответ от BjarkeCK - это одно из элегантных решений, которое мне нравится, и оно работает на всех основных браузерах.

Ответ 3

cursor:pointer не работает во входном файле только из-за кнопки по умолчанию. Здесь нет особой причины. Вам необходимо удалить его внешний вид с помощью этого кода, обратите внимание на font-size:0.

input[type='file']{
    opacity: 0;
    cursor: pointer;
    width: 24px;
    height: 24px;
    font-size: 0;
    position: absolute;
}
<input type="file">
<img width="24" height="24" title="" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAADs0lEQVR42rWVa2iOYRjH9+zd+dw2oWaGwkjzRY5flDC1nBaxsTnVYkaWc8oHoZalETWHsVGkZo0yIyEmGzkWpZhDbBhmxE7v63fp/0j7YGq89e/+XfdzuJ7/dV/3/Tp+//nndHdD2o4RIQHBnilgIPL3+XytjuO0MkZ4O3zllevve3uUYMaulDxeePL0mruNXeaTmJ/IfMlfJZhekBLv+PuNBEPRq8427wN/jxPmeJxM4seoAH0yF+g9WonmVOTfK+o2weTNyZ6w2KC9fNFuQtz7AuF0+DV8Ft4GZ6OvxPXE7xlLGZ8wF4CLK39MMLNwZDoPJPPAHcJwOAiOhp/Ct+Ba3d9J/I3YEjUzTmNuNuwHd8DtcAg8FK4ica2jeuYyFKM4cyB1aGEz0BoUYw6QLWoEakLLUY25UOl+foSubaB8O1wHmWS+R+YadUojbEmi4WjYo4Rv5SCWMdic2LzYEjfBAXAynImDI78nqOXCWcIk2KsHgmB/+ARs6/BE8UDGuYw5KmkbfA5O1QckwfNJUOqWaCnDdVRuL5WsXO1oobrIXpYgJ9W6N9VKgdZRjmreUwqPReYgg7mjroMlZL5K5v2E8XA/2JKshc9okfui78QNxLaYdxgteQkcCVfCW+HX8LiuDqwFr6Ey1B/1Rm/QMJSP8lCkus4cNNheQbt032G5s4+qR8PRIhwccB1kk/kmmSsIB8GdcDVfkEbyU/B45ntZt3Ctg9icfGQ8zdwW+AY8WG36UA7m8XyZm2CxbrqkElmC2/AE+DKcCMeaC/W8nUUtWthVcJ0WtlXNMhmeS4LjXbvoolmF22ErwSh4BTzTuguFaRPadm9iXG0NAFfA1hQvtEaT4CwSHHLXYBHDLWQJ4lXnp2ifuuUYStRC2zPB6LwdYagQzdImeydNtaOFNTjoOsiSTXuot3q9BW6Bc+E62Hb7EOJQ4irGYsY5zO2E4+FmrYE5GA0vsJPWTbBMtbZWG6AyeJXgkxbTDsKXWoPBKp3tn2DY0c5vhp/BY7TIv9p0idrUNlAfnS3uUW6J3uqsaZM8OnPsQAyRfLr3g1rd2rTYdZAjB0WyGadzphHuBQfqhd+I39jX6p5OObCjIspaWQ7NQQ4OitwEm7hQRMYvfv/gx/vM2UIS7HFLtFG7tUUd1C67Udqdn63HVYpoufmuebtuR/kXlS9cu3w7H3zBTWB/laOxlqDNlABbu37VUWw9bn+lIdrBnxljbMPpno/6w7Hj/B383E4GEjzq9k+/p78fan0xNyGwEGgAAAAASUVORK5CYII=" />

Ответ 4

Знай это старый поток. Но результаты google приносят это... Я просто нашел частичное решение для хром (не invalving flash, javascript, дополнительные манипуляции с DOM с скрытым переполнением)

  • firefox исправил это bug
  • сафари (7 в данный момент) и хром не имеют одинакового поведения
  • safari (7, mac) не работает вообще для меня
  • chrome (и, возможно, опера теперь, когда он webkit) может использовать псевдоним класса: webkit-file-upload-button

.

input[type=file], /* FF, IE7+, chrome (except button) */
input[type=file]::-webkit-file-upload-button { /* chromes and blink button */
    cursor: pointer; 
}

Проблема заключается в том, что кнопка не наследует свойство курсора вообще (?), но остальная часть ввода [type = file] полевая доза. То почему chrome получает указатель за исключением кнопки

Ответ 5

Если вы хотите заставить курсор быть рукой, чтобы поместить его на изображение, вот

ПРОСТОЙ ПУТЬ И КАК ЭТО РАБОТАЕТ В ВСЕХ БРАУЗЕРАХ:

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');
});

Затем вы можете нажать любую кнопку для загрузки файла, и у вас есть указатель курсора.

В Chrome и Opera курсор становится указателем только на заполнении, и если display:block;, то почему для этих браузеров вы должны это сделать:

<input type="file" id="file1"  name="file1" style="display:block; padding:29px 0 0 0;" />

Ответ 6

Я встретил эту проблему сегодня и с помощью:

/* Chrome/Safari and web-kit-based browsers 
   (if it doesn't work, try maybe also on the parent/wrapper)
*/
::-webkit-file-upload-button {
    cursor:pointer;
}

/* IE11 (if it doesn't work, try maybe also on the parent/wrapper) */
input[type=file] {
    cursor:pointer;
}

Кажется, все хорошо: -)

Ответ 7

Я сделал следующее:

<li>file<input id="file_inp" type="file" /></li>

для li:

li { /*...*/ position:relative; overflow:hidden; /*...*/ }

для ввода:

input#file_inp { 
    /*...*/ 
    position: absolute; 
    width: 400px; 
    left: -200px; 
    top:0; 
    cursor: pointer; 
    /*...*/ 
}

Как уже упоминалось ранее, курсор становится "указателем" на весь вход, за исключением кнопки. В большинстве браузеров кнопка находится с левой стороны или с правой стороны. ОК! Позволяет вводить огромную ширину и показывать только среднюю... Кнопка будет скрыта. И clickable - это весь ввод.

Это работает для меня.

Ответ 8

Если вы пытаетесь сделать загрузчик Ajax, вы можете попробовать другой метод для совместимых браузеров, таких как FireFox и Chrome. Они поддерживают запуск события щелчка на полностью невидимом входе в файл. Вы можете скрыть ввод файлов любым способом, за исключением того, что для него свойство отображения равно none. Установка {height: 0; overflow: hidden} в родительской форме будет делать трюк. Я использую отдельные формы для каждого загрузчика.

Перенаправить свое пользовательское событие нажатия кнопки на скрытый ввод файла, и все готово.

Чтобы использовать эту технику, вы должны выполнить проверку navigator.userAgent для движка Gecko или WebKit. Для других двигателей вы должны использовать старый метод прозрачного ввода файлов.

Ответ 9

Прежде всего, ваш код работает в Internet Explorer, но не работает в Firefox.

Во-вторых, стандарт W3C Css не позволяет создавать сложные теги типа <input />. Даже для свойства курсора.

В конец, см. эту страницу. Я не пытался его решить, так что скажите нам, работает ли он и как.

Ответ 10

Chrome тоже дал мне эту проблему. Я попытался установить все виды селекторов CSS, но ничего не получилось хорошо. Однако я нашел решение, используя элемент FORM.

  • введите свой элемент ввода [type = file].
  • назовите свой элемент формы и поместите в него вход [type = file].
  • введите пробел и поместите его ниже ввода в форме. Это будет ваш ярлык.
  • используйте CSS для установки высоты ввода 0px и непрозрачности 0, это сделает ее невидимой.
  • сделайте пролет позицией абсолютно и влево 0px.
<style>
    #file {
        height:0px;
        opacity:0;
    }  
    #span {
        left:0px;
        position:absolute;
        cursor: pointer;
    }
</style>

<form name="form">
    <input type="file" id="file" name="file"/>
    <span id="span">My File label!!!!</span>
</form>

<script>
    var span = document.getElementById("span");
    span.onclick = function(event) {
        document.form.file.click(event);
    };
</script>

Я тестировал это в Chrome и FF, но не так, но надеюсь, что это поможет. jsfiddle http://jsfiddle.net/aressler38/L5r8L/1/

Ответ 11

Попробуйте использовать:

input[type=file] {
  cursor: pointer; cursor: hand;
}

Посмотрите, работает ли это. Мне пришлось поместить указатель + руку в мою, чтобы она работала в FF/Chrome/etc. Кроме того, я не уверен, имеет ли это значение, но я не думаю, что в css есть цитаты вокруг "файла".

Ответ 12

            <span class="btn btn-success fileinput-button">
                <span><i class="icon-plus icon-white"></i> Select Image</span>
                <input type="file" name="files[]">
            </span>

css:

.btn {курсора: указатель;}

Вы можете увидеть это в действии здесь: http://blueimp.github.com/jQuery-File-Upload/

Это не jQuery, делающий это. Это файл http://blueimp.github.com/cdn/css/bootstrap-responsive.min.css. Я только что схватил то, что мне нужно, и отлично работает без какого-либо jquery.

Ответ 13

Я узнал, что есть другой подход, чтобы сделать это. Прекрасно работает в Opera New, FF, Chrome и Safari. К сожалению, он не работает идеально в IE (но достаточно хорошо для моего случая).

Идея состоит в том, чтобы обернуть элемент input=file с фиксированным размером div и скрытым переполнением и установить cursor: pointer;. Чем мы перемещаем кнопку за пределами div, используя левую прокладку.

<div class="input-file-wrap">
    <input class="file-input" type="file" />
</div>

и стили образцов

.input-file-wrap {
    background: red;
    height: 33px;
    width: 240px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.file-input {
    width: 100%;
    height: 100%;
    opacity: 0;
    padding-left: 240px;
    margin-right: -240px;
    cursor: pointer;
}

Здесь вы можете найти живой пример: http://jsfiddle.net/5c5RH/2/

Ответ 14

На основе fooobar.com/questions/16583/... - Скрыть ввод с использованием непрозрачности 0.

Ключ к тому, чтобы курсор работал во всей области, устанавливает значение font-size на значение, большее, чем высота кнопки, так что кнопка ввода файла находится под видимой областью, и курсор мыши находится на текстовая часть ввода файла:

<div style="display: block; width: 100px; height: 50px; overflow: hidden">
    <button style="width: 110px; height: 50px; position: relative; top: -5px; left: -5px;" ><a href="javascript: void(0)">Upload File</a></button>
    <input type="file" id="upload_input" name="upload" style="height:50px; width: 120px; opacity: 0; filter:alpha(opacity: 0);  font-size: 70px; position: relative; top: -50px; left: -20px; cursor:pointer" />
</div>

Ответ 15

Как я это сделал:

    /* Upoload */
#upload-profile-file {
    z-index: 1;
}
.uploadButton input[type="file"] {
    cursor:pointer;
    position:absolute;
    top:0px;
    opacity:0;
}
#upload-profile-file:hover ~ #upload-profile-pic-btn
{
    text-decoration:underline;
}

#upload-profile-pic-btn {
    z-index:-1;
}

И затем на моей странице просмотра:

  <form id="upload-profile-pic-form">
                                                <div class="uploadButton">
                                                    <input type="file" id="upload-profile-file" name="upload" style="width: 88px; opacity:0.0; filter:alpha(opacity=0); " onchange='upload()'/>
                                                    <a id="upload-profile-pic-btn" href="#" class="expand">Upload</a>
                                                </div>
                                            </form>

И затем я просто отправлю свою форму через AJAX на сервер и обрабатываю остальное там.

Итак, tl; dr → Я передаю клик видимой ссылки (со всеми стилями и колокольчиками), и я фактически нажимаю на ввод файла.:)

Надеюсь, это поможет кому-то.