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

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

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

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

   <div>
     <input name="img_uploadCat" type="file" />
     <img src="https://codernote.ru/files/button_choosefile.png" alt="" name="withoutImg" />
     <p>Выбранный файл:</p>
   </div>

    

2. CSS

   input {
     position: absolute;
     display: none;
   }
   
   img {
     cursor: pointer;
     padding-left: 2px
   }

    

3. JQuery

   $( document ).ready(function() {
     $("img[name='withoutImg']").attr('onclick', '$(this).parent().find("input[name=\'img_uploadCat\']").click()');
   })

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

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

[codepen_embed height=”268″ theme_id=”0″ slug_hash=”JGvQJb” default_tab=”result” user=”AmateR”]See the Pen <a href=’http://codepen.io/AmateR/pen/JGvQJb/’>JGvQJb</a> by Aleksei (<a href=’http://codepen.io/AmateR’>@AmateR</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]