В этом материале пойдет речь о том как кастмизировать поле ввода file в формах. Эти поля обычно во всех броузерах выглядят по разному. Для того чтобы привести все к единому дизайну мы изменим основной атрибут тега -  определяющий вид элемента — type.

Это один из из разносторонних элементов формы, и он позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем:

<input type="" />

Главным образом он предназначен для создания текстовых полей, различных кнопок, переключателей и флажков.

Можно задавать и настраивать следующие элементы формы:

• текстовое поле (text),
• поле с паролем (password),
• переключатель (radio),
• флажок (checkbox),
• скрытое поле (hidden),
• кнопка (button),
• кнопка для отправки формы (submit),
• кнопка для очистки формы (reset),
• поле для отправки файла (file),
• кнопка с изображением (image).

type="file" определяет поле для ввода имени файла, который пересылается на сервер.

У браузеров нет единых стандартов, как отображать этот элемент по умолчанию.

<input id="upload" name="upload" type="file" />

Так он выглядит в Internet Explorer 11:

А так - в Firefox 47:

В Google Chrome:

В Safari:

Как же привести их к одному дизайну, чтоб во всех браузерах форма выглядела одинаково?

Для этого нам на помощь прийдет html+css. В то место, где должно быть поле выбора файла, вставим следующий код:

 
<div class="fileform">
<div id="fileformlabel"> </div>
<div class="selectbutton">Обзор</div>
<input name="upload" id="upload" onchange="getName(this.value);" type="file" />
</div>
 

Для отображения того каой файл выбран - добавим небольшой код с использованием javascript. Добавим к полю функцию-обработчик событий, а к блоку - еще один блок-заголовок и, конечно, его стиль:

.fileform { 
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
border-radius: 2px;
cursor: pointer;
height: 26px;
overflow: hidden;
padding: 2px;
position: relative;
text-align: left;
vertical-align: middle;
width: 230px;
}
 
.fileform .selectbutton { 
background-color: #A2A3A3;
border: 1px solid #939494;
border-radius: 2px;
color: #FFFFFF;
float: right;
font-size: 16px;
height: 20px;
line-height: 20px;
overflow: hidden;
padding: 2px 6px;
text-align: center;
vertical-align: middle;
width: 50px;
}
 
.fileform #upload{
position:absolute; 
top:0; 
left:0; 
width:100%; 
-moz-opacity: 0; 
filter: alpha(opacity=0); 
opacity: 0; 
font-size: 150px; 
height: 30px; 
z-index:20;
}
.fileform #fileformlabel { 
background-color: #FFFFFF;
float: left;
height: 22px;
line-height: 22px;
overflow: hidden;
padding: 2px;
text-align: left;
vertical-align: middle;
width:160px;
}
 

Теперь во всех браузерах поле формы выглядит одинаково.

Сама функция-обработчик получает полное имя выбранного файла, отбрасывает путь (с проверкой стандарта в файловой системе), сохраняет имя с расширением в переменную filename и записывает его в блок fileformlabel.

function getName (str){
if (str.lastIndexOf('\\')){
var i = str.lastIndexOf('\\')+1;
}
else{
var i = str.lastIndexOf('/')+1;
}            
var filename = str.slice(i);      
var uploaded = document.getElementById("fileformlabel");
uploaded.innerHTML = filename;
}
 

Теперь поле формы выглядит так (При этом можно менять его размер, цвет, шрифт и выравнивание):

Посмотреть пример... Скачать файл889 Байт