Кроссбраузерная стилизация input type="file" с помощью CSS

Продолжаем тему извечного противостояния дизайнеров и верстальщиков. Основной конфликт возникает тогда, когда дизайнер рисует картинку сайта так, как нужно заказчику, а потом верстальщику приходится адаптировать под это изображение различные элементы HTML. Один из самых сложных для стилизации элементов - это поле выбора файлов, элемент input с типом file. В качестве наглядного примера, вот как он отображается в различных браузерах:


Дополнительную сложность создает то, что это поле попадает под различные правила безопасности браузеров, поэтому его нельзя, например, заменить каким-нибудь стилизованным div, нельзя обернуть тегом label, нельзя напрямую присвоить значение с помощью скриптов или вызвать окно выбора файла, сэмулировав нажатие через element.click(). А в некоторых браузерах даже нельзя сделать поле выбора файлов скрытым, так как после отправки формы его значение не будет передано на сервер. В разных интернетах я встречал попытки сделать кроссбраузерное решение, но все они, на самом деле, не универсальные и ограничиваются конкретными браузерами.

Когда мне понадобилось решить эту проблему, я решил воспользоваться уже проверенным трюком, при котором нужный элемент помещается внутрь блока div с фиксированными размерами и фоновым изображением, а самому же элементу присваивается атрибут "прозрачный". Не скрытый, а именно полностью прозрачный. Еще немного пришлось пошаманить, чтобы в границах родительского div'а оказалась область input, отвечающая на клик мышкой и открывающая окно выбора файла. Для этого был максимально увеличен шрифт и высота самого input'а. HTML-код получается простейший:CSS-код получается не совсем валидный за счет использования фильтров браузера Internet Explorer, но это плата за кроссбраузерность. В крайнем случае, если требуется стопроцентное прохождение валидатора, можно выставлять этот атрибут динамически средствами JavaScript или загружать отдельную таблицу стилей для IE.Теперь на экране мы видим только стилизованную кнопку, при клике на которую открывается окно выбора файлов. Поле input для выбора файлов не отображается, но при этом прекрасно работает. Небольшая проблема остается еще в том, что некоторые браузеры игнорируют стиль курсора, и над полем input все равно отображают его как текстовый. Но, как мне кажется, на это можно не обращать внимания, хотя знать об этом нелишне.

На этом можно было бы и закончить, но в некоторых случаях может понадобиться имя выбранного файла, например, чтобы до отправки формы мы могли выполнить предварительную проверку, если ожидается файл определенного типа. Или же, например, чтобы пользователь мог проверить, тот ли файл он загружает. В обычном поле input пользователь его и так видит, а в нашем стилизованном - нет. Для этого добавим обработчик на событие onchange, HTML-код немного дополнится:и добавится вот такой скрипт:Некоторые браузеры предоставляют расширенный доступ к свойствам файла в поле input, для таких браузеров можно получить не только имя файла, но и его размер. Соответственно, такая расширенная информация и будет отображаться. Для остальных браузеров мы просто будем показывать имя выбранного файла, это значение всегда доступно через свойство value поля input.

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

Комментарии

Добавить комментарий

Для вставки цитаты выделите текст и нажмите сюда

Имя*:

Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.

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