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

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

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

    
    Custom Upload

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

    Custom Upload

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

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

/* Скрываем элемент  */
input[type="file"] {
    display: none;
}

/* Собственно стилизируем кнопку в соответствии с нужным внешним видом */
.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

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

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

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