Оформление input file

Оформление input file

От автора: приветствую вас, друзья. В предыдущей статье мы с вами создали элемент формы input с типом file, с помощью которого можно загрузить файл на сервер. Однако по умолчанию внешний вид данного элемента формы оставляет желать лучшего. Хотелось бы стилизовать его. Как это сделать? Об этом в статье Оформление input file ниже. Начнем?

Исходные файлы текущей статьи вы можете скачать по ссылке.

Итак, возьмем код из предыдущего урока. Как вы помните, наша форма выглядит так:

Это вид input file в браузере Firefox. Давайте взглянем на форму в браузере Chrome:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

В Хроме поле загрузки файла также не блещет красотой. К тому же мы получили разное оформление в различных браузерах. Как же красиво оформить поле input file и при этом получить более или менее одинаковое оформление вне зависимости от браузера?

Мы с вами используем Bootstrap, поэтому для решения задачи специальным плагином — Bootstrap File Input. Подобные плагины можно найти и для вариантов без Bootstrap. Скачаем и подключим плагин. Нам необходимо подключить файл стилей (подключаем после bootstrap.min.css) и файл js (подключаем перед bootstrap.min.js) плагина:

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Здесь мы обращаемся к полю id=»file» и вызываем метод плагина fileinput() без настроек. Посмотрим на результат:

Смотрится отлично! При этом аналогичный результат мы получим в различных браузерах. Для настройки поля file остается лишь заглянуть в документацию. Например, я хочу, чтобы вместо поля с кнопкой, присутствовала только кнопка. Для этого используем такой вариант:

Отлично! Можем попробовать изменить стандартный текст Browse на что-то другое. Заодно изменим класс кнопки:

Все очень просто и гибко. Как видим, мы стилизовали input file и получили вполне симпатичное поле для загрузки файлов. Ну а на этом наша статья завершена. Удачи!

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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