Html. Css. Стилизация кнопки input type=»file»?

Главная  >>  Frontend  >>  css  >>  Html. Css. Стилизация кнопки input type=»file»?

21

Окт

Html. Css. Стилизация кнопки input type=»file»?

Нет комментариев  , , ,  css, Frontend, html

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

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

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

XHTML
1
2
3
4
<label class="custom-file-upload">
    <input type="file"/>
    Custom Upload
</label>

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

XHTML
1
2
3
4
<label for="file-upload" class="custom-file-upload">
    Custom Upload
</label>
<input id="file-upload" type="file"/>

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

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

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. Решение подсмотрел здесь.

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

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

Похожие записи