Свойство cursor: pointer не применяется к кнопкам загрузки файлов в браузерах Webkit

У меня есть код CSS, который действительно не работает в браузерах webkit, таких как сафари и хром

если вам нужен живой пример здесь http://jsfiddle.net/mnjKX/1/

У меня есть этот код CSS

.file-wrapper {
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    position: relative;
}
.file-wrapper input {
    cursor: pointer;
    font-size: 100px;
    height: 100%;
    filter: alpha(opacity=1);
    -moz-opacity: 0.01;
    opacity: 0.01;
    position: absolute;
    right: 0;
    top: 0;
}
.file-wrapper .button {
    background: #79130e;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 11px;
    font-weight: bold;
    margin-right: 5px;
    padding: 4px 18px;
    text-transform: uppercase;
}

и этот код HTML:

<span class="file-wrapper">
   <input type="file" name="photo" id="photo" />
   <span class="button">Choose a Photo</span>
</span>

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

как я могу его решить или обходить/обгонять?

Ответ 1

Во-первых, он работает в Chrome, если вы удалите объявление height из правила input.

Live demo: http://jsfiddle.net/mnjKX/16/

Но это прозрачное поле ввода - чертовски взломанный... Я бы не стал полагаться на него.

Update:

И вот правильное решение:

::-webkit-file-upload-button { cursor:pointer; }

Я думал, что кнопка загрузки файла недоступна, но таблица стилей в стиле пользователя Chrome оказалась неправильной :)

Ответ 2

Интересное (кросс-браузерное) решение, с которым я столкнулся:

Введите значение свойства CSS курсора: указатель, поместите ввод в div (с переполнением: скрытый) и введите входное значение на 100%. Проложенная область будет иметь свойство указателя.

Я лично не доверяю -webkit и -moz исправлениям, потому что я чувствую, что они произвольные и временные, и скоро будут заменены.

Ответ 3

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

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

Он отлично работает на Chrome, Firefox и IE для меня. Я надеюсь, это также поможет вам.