Нативный элемент загрузки файла в Html выглядит, мягко говоря, не очень хорошо — поэтому в этой короткой статье я приведу пример, как при помощи css стилизировать кнопку input type=file.
Итак, решение включает две части — Html и CSS.
Html
. Оберните input
в тег label
:
Также можно вынести элемент формы за предел
Оба варианта должны функционировать аналогично.
CSS
. Добавьте следующие стили:
/* Скрываем элемент */ input[type="file"] { display: none; } /* Собственно стилизируем кнопку в соответствии с нужным внешним видом */ .custom-file-upload { border: 1px solid #ccc; display: inline-block; padding: 6px 12px; cursor: pointer; }
Таким нехитрым способом можно «обыграть» внешний вид кнопки загрузки файлов при помощи чистого CSS. Решение подсмотрел здесь.
Пример работы можно посмотреть тут.
Надеюсь статья была полезной для Вас — в любом случае — пишите Комментарии! Удачи!