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

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

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

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

IE7+

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

в Firefox

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

Chrome и Safari _{^{(идентичное поведение)}}

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

Опера

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

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

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=" />

он работает perpectly на Chrome, Firefox и IE.

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

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

.

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

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

Я встретил этот вопрос сегодня и с:

/* 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;
}

Кажется, все в порядке: -)

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

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

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;" />

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

<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; 
    /*...*/ 
}

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

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

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

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

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

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

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

Endly, see на этой странице. Я не пробовал его решение, поэтому скажите нам, работает ли оно и как.

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

идея в том, чтобы обернуть input=file элемент с фиксированным размером div и скрытым переполнением и set 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/

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

1. назовите элемент ввода[type=file].
2. назовите элемент формы и поместите в него ввод[type=file].
3. сделайте пролет и поместите его под входом в форме. Это будет твой лейбл.
4. используйте CSS, чтобы установить высоту ввода в 0px и непрозрачность в 0, это сделает его невидимым.
5. сделайте пядь расположенную совершенно и к левому 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, а не ie, но я надеюсь, что это поможет. jsfiddle http://jsfiddle.net/aressler38/L5r8L/1/

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

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

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

            <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{cursor: pointer;}

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

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

на основе https://stackoverflow.com/a/3030174/2325676 - скрыть вход с помощью непрозрачности 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>

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

    /* 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 на сервер и обрабатываю остальные там.

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

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