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

Здравствуйте уважаемые читатели блога 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. Кроме того многие браузеры позволяют получать размер и разрешение выбранного файла. Также можно сделать предпросмотр выбранного файла в случае если загружается картинка. Например, такой вариант:
 

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

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