Кастомизация внешнего вида <input ... >

Как и обещал, коротенький обзор метода, которым я воспользовался, для стилизации поля ввода информации типа «файл»:

<input type="file" />

Те кто сталкивались когда-либо с вопросом верстки формы скорее всего имели возможность столкнуться и с проблемностью стилизации ряда элементов формы средствами таблиц стилей. Один из самых проблемных элементов с этой точки зрения — поле для загрузки файлов, которое кроме того что крайне слабо реагирует на стили, еще и имеет довольно отличающийся вид в ряде браузеров. Ранее я обходил эту проблему, помещая в блок с относительным позиционированием сперва оформленный в соответствии с дизайном элемента, имитирующий поле ввода. Поверх него я размещал абсолютно позиционированное, полностью прозрачное, поле типа file, по ширине и высоте занимающее весь размер родительского контейнера. Таким образом — при клике пользователем по якобы стилизованному полю, пользователь на самом деле нажимал на невидимый инпут и вызывал соответствующее событие. Метод хороший, однако у него есть существенный недостаток, на который я одно время закрывал глаза — невозможность задать смену курсора на привычный для элементов управления указательный палец и, также, вероятность проблем при желании задать смену внешнего вида элемента при наведении на него.

В поисках решения, которое обходило бы вышеуказанные моменты, я нашел следующий метод Суть в том, что как и в описанном выше варианте — невидимый инпут с абсолютным позиционированием помещается в родительский контейнер с position:relative; оформленный, как того требует внешний вид сайта. При помощи js инпут перемещается по области родительского контейнера, таким образом, что его край всегда оказывается под курсором, получается, что курсор вроде бы одновременно находится над областью имитирующей инпут и поэтому легко вызывает hover-state и меняет свой внешний вид на pointer и в тоже время клик в любой точке этого блока вызовет также и клик по перемещающемуся за курсором инпуту.

Код CSS и JS сюда не дублирую, все доступно на jsfiddle. Единственное что, еще продемонстрирую версию, где инпуту не задана прозрачность, чтоб лучше понять как этот прием работает нажмите сюда .

Продолжаю освещать тему стилизации/кастомизации форм и ее компонентов.

Исследовав «рынок» бесплатных скриптов позволяющих реализовать данную задачу (кстати, следует отметить что HTML5 подразумевает чистые (т. е. без каких-либо плагинов) элементы для этих целей, однако эти решения на данный момент не имеют широкой поддержки в браузерах), я остановился на оптимальном, как мне показалось, плагине dropzone.js .

Плагин достаточно простой во внедрении (правда, не могу ручаться за то, насколько он там дальше удобен в плане загрузки файлов на сервер, по нажатию на кнопку формы «отправить», т. к. не пробовал на работающей форме, но судя по комментарием, все в порядке и там), имеет ряд настроек, позволяющих в достаточной мере влиять на его функционирование (можно задавать максимальный размер файлов, максимальное количество файлов, размеры картинок-превьюшек, прочее), также можно задать реакцию на события разного рода (окончание загрузки, ошибка при загрузке, достижение максимального количества файлов, ряд других).

<div class="dz-preview dz-file-preview">
<div class="dz-details">
  <div class="dz-filename"><span data-dz-name></span></div>
  <div class="dz-size" data-dz-size></div>
  <img data-dz-thumbnail />
</div>
<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
<div class="dz-success-mark"><span>✔</span></div>
<div class="dz-error-mark"><span>✘</span></div>
<div class="dz-error-message"><span data-dz-errormessage></span></div>
</div>

Таким образом посредством таблиц стилей достаточно легко получить необходимый внешний вид.

Плагин может работать как в присутствии jquery, так и без библиотеки.

Инициировать работу плагина через jquery следует скриптом

$("div#myId").dropzone({ url: "/file/post" });

Вопрос кроссбраузерности: плагин поддерживается там, где адекватно поддерживается API драг н дропа, а именно:

• Chrome 7+
• Firefox 4+
• IE 10+
• Opera 12+
• Safari 6+

Как видим в ИЕ поддержка начинается аж с 10-й версии, поэтому для этого семейства браузеров, предлагаю через if подключать предложенный мною вчера вариант оформления input="file" и соответственно не подключать dragzone.