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

Question

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

этот вопрос уже есть ответ здесь:

стиль ввода типа=кнопка "файл" 40 ответов

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

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

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

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

15 67

html css input

15 ответов:

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

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

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

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

IE7+

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

FireFox

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

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

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

Опера

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

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

40

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.

26

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

firefox исправил это ошибка

safari (7 на данный момент) и chrome не имеют идентичного поведения

safari (7, mac) не работает вообще для меня

chrome (и, возможно, opera теперь, когда это 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 получает указатель, кроме кнопки

17

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

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

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

13

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

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

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

Я сделал следующее:
<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; 
    /*...*/ 
}
как уже упоминалось ранее, Курсор становится "указателем" на весь вход, исключая кнопку. В большинстве браузеров кнопка находится на левой стороне или на правой стороне. Хорошо! Давайте дадим входу огромную ширину и покажем только середину... Кнопка будет скрыта. И кликабельность-это весь вход.

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

6

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

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

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

2

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

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

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

1

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

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

назовите свой входной элемент[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, а не ie, но я надеюсь, что это поможет. jsfiddle http://jsfiddle.net/aressler38/L5r8L/1/

1

попробуйте использовать:
input[type=file] {
  cursor: pointer; cursor: hand;
}
посмотреть, если это работает. Мне пришлось положить указатель + руку в мою, чтобы заставить его работать в FF/Chrome/etc. Кроме того, я не уверен, что это имеет значение, но я не думаю, что есть кавычки вокруг "файла" в css.

0

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

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

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

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

0

на основе 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

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

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

0

BjarkeCK · Accepted Answer · 2012-02-07 22:02:36

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

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

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

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

15 ответов:

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

IE7+

FireFox

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

Опера

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

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