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

Одной из самых сложных задач для верстальщика является стилизация элементов формы так, как видит их дизайнер. Тем более по умолчанию такие поля как 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), так как они в основном отвечают за внешний вид кнопки выбора файла.

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

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

<style>
.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;

}[/html]

Подпись автора

[marquee=left]«МФ»   smalimg Мы такие разные и всё-таки мы вместе smalimg По любым вопросам касающимся форума, обращайтесь ко мне в л/с. [/marquee]