Эмуляция нажатия файл-инпута

Формы, пожалуй, один из самых важных элементов на странице и их стилизация щекотливый момент при верстке. Главное назначение форм это обмен информации между пользователем и сервером. Самые часто используемые теги форм — input, textarea, select, label.

Из всех этих тегов, самым неудобным для стилизации оказался input[type=»text»]. На хабрахабре была статья в которой как раз рассказывалось о том, как можно изменить внешний вид файлового инпута и том почему реализовать это не просто — в первую очередь это связано с безопасностью, во вторую с тем, что каждый браузер по своему отображает этот элемент, и на это почти нельзя повлиять. В статье были проанализированы все браузеры и в итоге выработано единое решение.

Я хочу предложить другое решение этой проблемы.

  1. Наш файл-инпут и картинка

     
  2. CSS

     
  3. JQuery

Итак. В чем же суть? А все просто — скрываем нашу кнопку, и с помощью JQuery при клике по картинке передаем управление файл-инпуту.

Пример работы:

See the Pen JGvQJb by Aleksei (@AmateR) on CodePen.0

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *