Нативный элемент загрузки файла в Html выглядит, мягко говоря, не очень хорошо — поэтому в этой короткой статье я приведу пример, как при помощи css стилизировать кнопку input type=file.

Итак, решение включает две части — Html и CSS.

Html. Оберните input в тег label:

Также можно вынести элемент формы за предел :

Оба варианта должны функционировать аналогично.

CSS. Добавьте следующие стили:

Таким нехитрым способом можно «обыграть» внешний вид кнопки загрузки файлов при помощи чистого CSS. Решение подсмотрел здесь.

Пример работы можно посмотреть тут.

Надеюсь статья была полезной для Вас — в любом случае — пишите Комментарии! Удачи!