Произвольный вид поля file в html-форме, одинаковый во всех браузерах

Не смотря на развитие, внедрение новых стандартов и плюшек в браузерах, у них нет единых стандартов, как отображать элемент  по умолчанию. Более того, у этого элемента нет атрибутов, позволяющих его в какой-то мере стилизовать.
Из-за необходимости привести это поле формы к единому виду во всех браузерах и «вписать» в разработанный дизайн, после поисков и анализа материалов в интернете был разработан метод замены вида поля формы на html+css, и js для расширения функциональности.

Как по умолчанию выглядит это поле?

Так он выглядит в Internet Explorer 9:

image

А так — в Firefox:
image

В Google Chrome:
image

В Opera:
image

В Safari:
image

Стилизация поля file

В то место, где должно быть поле выбора файла, вставим следующий код:

 

В файл стилей добавим такие блоки:

 

Теперь во всех браузерах поле формы выглядит одинаково, при этом форма выбора файла всё так же появляется по клику и на поле и на кнопку:
image

Главный недостаток полученного решения от стандартной формы — оно никак визуально не сигнализирует о том, что файл был выбран. Эта проблема решается с использованием javascript.

Добавление подписи о выбранном файле

Добавим к полю функцию-обработчик событий, а к блоку — еще один блок-заголовок и, конечно, его стиль:

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

Теперь поле формы выглядит так (при этом можно менять его размер, цвет, шрифт и выравнивание):

image

Источник: http://habrahabr.ru/post/171743/

Читайте также:

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.