Свой input[type=file]
31 июля 2012
Иногда стандартное поле для загрузки файла ну совсем не вяжется с остальным дизайном страницы. В лоб подменить его нельзя, зато можно взять хитростью:
+
input[type=file]
обрачивается в контейнер:
<div class="file_upload">+<input type="file" /></div>
Далее применяем немного CSS:
.file_upload { /* Для того, чтобы спозиционировать input относительно контейнера. */ position: relative; /* Скрываем неумещающуюся часть input-а. */ overflow: hidden; /* Украшательство: */ background: #eee; border: 1px solid #ccc; font-size: 30px; line-height: 1; text-align: center; padding: 20px; width: 40px; } .file_upload input[type=file] { /* Позиционируем правый верхний край input поверх нашего контейнера. Правый верхний потому как именно там у нас кнопка. */ position: absolute; top: 0; right: 0; /* Делаем input побольше, чтобы он точно перекрыл контейнер. */ font-size: 200px; /* Делаем input невидимым. По-другому нельзя, иначе браузер не будет на него реагировать. */ opacity: 0; filter: alpha(opacity=0); /* Украшательства: */ cursor: pointer; }
UPD: ещё одно решение.
Комментарии RSS по email OK
А как у этого решения с событиями? Больше всего интересует работа hover и наличие title.
Сам
input
реагирует наchange
, то есть можно устроить сабмит. Также реагирует наmouseover
иmouseout
, что позволяет применить нужные стили для hover и реализовать свой title.Правильней использовать lable, вот так
Тогда и инпут можно спрятать (display:none) и hover на лейбле работает
display:none разве взлетит? input[type=file], насколько я помню, требует физического клика мышкой. Или я путаю что-то?
@Николай Харитонов: Можно заключить скрываемый
INPUT
в блок с нулевыми размерами иoveflow: hidden
или сдвинуть его с помощьюposition: absolute
за пределы элементаLABEL
, которому задатьoverflow: hidden
.Бари Бетткер, MT, как уже озвучил, Николай Харитонов, ваше решение работать не будет.
@Sam: У нас с Бари разные решения. Моё решение (с использованием
position: absolute
вместоdisplay: none
) работает везде, но применительно к<input type="file" />
у Firefox, похоже, баг. А вот с submit-кнопками работает безотказно во всех браузерах (именно таким образом кнопки обычно и стилизую).Баг № 701353
Ну, submit можно и напрямую стилизовать. Учитывая баг, выходит, что моё решение пока единственное рабочее.
За ссылку на баг спасибо.
Можно, но с точностью до пиксела (pixel-perfect) и без использования нестандартных CSS-свойств, как известно, проблематично.
В хроме (по крайней мере в 20 и 21) есть баг - не виден курсор pointer. При этом в фф все ок. В других браузерах не проверял. Решение проблемы было найден на SO
Вот кроссбраузерное решение в 2 кб. verstkawebsaita.ru/masterskaya-verstalshchika/veb-formy/input-file/jquery-plagin-customfile
Объясните кто-нибудь, как работает свойство? filter: alpha(opacity=0);