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