Вёрстка инпута для загрузки файла без JS

Если хотите иметь функционал кнопки и поля типа DropZone и при этом строить своё представление этого элемента формы, то делается следующим образом. Сам элементу устанавливаем видимость в 0, растягиваем элемент на всю площадь DropZone и ставим z-index выше своего представление. То есть, своё представление строите непосредственно под <input>.

Получается вроде такого:

input[type=file]{
   opacity:0;
   position: absolute;
   width: 300px;
   height: 100px;
   z-index: 10;
}

Но ваш функционал вряд ли осуществим на чистом CSS. Если вы используете на вашем сайте jQuery, вам наверняка понравится FilePond.

Если вы предпочитаете легковесные решения, то вот вам несколько ссылок на простенькие скрипты:

• https://github.com/pb03/input-file
• https://github.com/nifte/better-file-input
• https://github.com/lifenautjoe/droppable
• https://github.com/enyo/dropzone/
• https://github.com/promosis/file-upload-with-preview