it-swarm.com.ru

Изменить тип курсора на тип ввода = "файл"

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

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

<!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>

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

69
Tisch

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

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

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

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

IE7 +

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

Fire Fox

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

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

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

Опера

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


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

40
awe

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

Это работает, вероятно, на Chrome, Firefox и IE.  

29
Lewis

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

  • firefox это исправил ошибка
  • safari (7 на данный момент) и Chrome не имеют одинакового поведения
  • safari (7, Mac) не работает для меня вообще
  • chrome (и, возможно, Opera сейчас, когда это веб-набор) может использовать псевдо-класс :: 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; 
}

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

23
Endless

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

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

Вроде все нормально :-)

14
madtyn

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

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

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

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

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

для ли:

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

для ввода:

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

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

Это подходит для меня.

6
oporkov

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

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

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

2
Harry

Хром тоже давал мне эту проблему. Я пытался установить все виды селекторов 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, а не, то есть, но я надеюсь, что это поможет . Jsfiddle http://jsfiddle.net/aressler38/L5r8L/1/

1
alex

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

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

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

1
enguerran

Я узнал, что есть другой подход, чтобы сделать это. Отлично работает в 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/

1
pawelkmpt

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

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

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

0
Jesse O'Brien
            <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.

0
Christina

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

    /* 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 -> я передаю щелчок видимой ссылки (со всеми стилями, свистками и свистками) и фактически нажимаю на вход файла. :)

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

0
Martin

На основании 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>
0
Daniel Flippance