Вопрос:
У меня есть код 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,
как я могу его решить или обходить/обгонять?
Лучший ответ:
Во-первых, он работает в Chrome, если вы удалите объявление height из правила input.
Live demo: http://jsfiddle.net/mnjKX/16/
Но это прозрачное поле ввода – чертовски взломанный… Я бы не стал полагаться на него.
Update:
И вот правильное решение:
::-webkit-file-upload-button { cursor:pointer; }
Я думал, что кнопка загрузки файла недоступна, но таблица стилей в стиле пользователя Chrome оказалась неправильной 🙂
Ответ №1
Интересное (кросс-браузерное) решение, с которым я столкнулся:
Введите значение свойства CSS курсора: указатель, поместите ввод в div (с переполнением: скрытый) и введите входное значение на 100%. Проложенная область будет иметь свойство указателя.
Я лично не доверяю -webkit и -moz исправлениям, потому что я чувствую, что они произвольные и временные, и скоро будут заменены.
Ответ №2input[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 для меня. Я надеюсь, это также поможет вам.
