Стилизация input file. CSS стилизация поля для загрузки файла

12 июля 2016

Здравствуйте уважаемые читатели блога webcodius.ru! Одной из самых сложных задач для верстальщика является стилизация элементов формы так, как видит их дизайнер. Тем более по умолчанию такие поля как select, checkbox или file совершенно отличаются внешне в разных браузерах. В этой статье рассмотрим способы стилизации поля для загрузки файла, чтобы оно одинаково выглядело в большинстве браузеров.

На мой взгляд, наиболее оптимальным решением будет обернуть поле input с типом file в тег label. Затем скрываем поле input file, а при клике по элементу label будет вызываться окно выбора файла.

Html — код вставки поля для загрузки файла в этом случае будет таким:

<div id="file-upload">
<label>
<input type="file" name="file" id="uploade-file">
<span>Выберите файл</span>
</label>
</div>

Далее задаем CSS стили для наших элементов:

.file-upload input[type="file"]{
display: none;/* скрываем input file */
}
/* задаем стили кнопки выбора файла*/
.file-upload {
position: relative;
overflow: hidden;
width: 250px;
height: 40px;
background: #4169E1;
border-radius: 10px;
color: #fff;
text-align: center;
}
.file-upload:hover {
background: #1E90FF;
}
/* Растягиваем label на всю область блока .file-upload */
.file-upload label {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
/* стиль текста на кнопке*/
.file-upload span {
line-height: 40px;
font-weight:bold;
}

Большинство CSS правил для класса .file-upload можно менять под Ваши нужды (такие как background, border-radius, color, width и height), так как они в основном отвечают за внешний вид кнопки выбора файла. 

В результате в окне браузера мы видим стилизованную кнопку выбора файла, по клику на которой появляется окно выбора файла:

Осталась дна проблема. При выборе файла, визуально это никак не отобразиться, а хотелось бы видеть имя загружаемого файла. Это может понадобиться, что бы пользователь мог проверить, тот ли файл он загружает. В стандартном поле input file имя загружаемого файла отображается рядом с кнопкой выбора файла, а в нашем стилизованном этого нет. Для исправления этой ситуации потребуется использовать javascript

Для начала добавим в html-код дополнительный элемент элемент div для вывода имени загружаемого файла и добавим обработчик на событие onchange:

<div class="file-upload">
<label>
<input type="file" name="file" onchange="getFileName ();" id="uploaded-file">
<span>Выберите файл</span>
</label>
</div>
<div id="file-name"></div>

 Далее добавляем код javascript, который вставляет имя файла в элемент <div id="file-name">:

function getFileName () {
var file = document.getElementById ('uploaded-file').value;
file = file.replace (/\\/g, «/»).split ('/').pop ();
document.getElementById ('file-name').innerHTML = 'Имя файла: ' + file;
}

В результате получим такой вариант поля input file:

 

При выборе файла под кнопкой появляется текст с названием файла. Данный способ стилизации input file точно работает в браузерах IE9+, Chrome, Firefox, Mozilla и Opera. Кроме того многие браузеры позволяют получать размер и разрешение выбранного файла. Также можно сделать предпросмотр выбранного файла в случае если загружается картинка. Например, такой вариант:
 

 
 
 

Код к последнему примеру можно скачать по ссылке.

На этом все, до новых встреч!

(9 оценок, среднее: 3,56 из 5)
Loading...

Получай статьи почтой:


Комментарии
  1. Alex

    Здравствуйте! 

    Как реализовать второй вариант кнопки?? С размером файла и предпросмотром изображения?? Как у вас после текста:

    «Также можно сделать предпросмотр выбранного файла в случае если загружается картинка. Например, такой вариант:»

    25 мая 2017 19:08
  2. Павел

    Ошибка. Написано, что

    .file-upload input[type="file"]{

    при том что html

    Насколько мне известно, то нужно сделать так

    #file-upload input[type="file"]{

    23 августа 2018 23:53
  3. Владимир

    Добрый день. а как сделать по вашему примеру так чтобы несколько картинок можно было загружать сразу и превью к ним показывались.? сейчас у вас только одну можно в примере.

    22 августа 2020 17:26
  4. Иван

    Нашёл ошибку

    Вы вместо id класс получаете

    .file-upload input[type="file"]{

    display: none;

    }

    #file-upload input[type="file"]{

    display: none;

    }

    4 июня 2021 11:11

Оставить комментарий




Subscribe without commenting