Столкнулся с непроходимостью стилизовать инпут типа файл.
Оказалось это не совсем просто.
Поискал в Инете, нашёл несколько способов видоизменения данного поля, но большинство из них вовсю используют JavaScript и слишком громоздки и избыточны. Мне нужен был простой и лёгкий способ, без всяких наворотов. Вот мой вариант.
Смысл примерно такой: запаковываем файл-инпут в блок, с фоновой картинкой кнопки,создаём дополнительный инпут для вывода значения (название выбранного файла) из inputtype="file", и скрываем стилями файл-инпут. Приступим. Исходные данные страницы, с которой буду работать, такие: Code (HTML) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cтилизация файл-инпутов (тип file)</title>
<style type="text/css">
/* ResetStyle */
*{margin:0;padding:0;border:none;outline:0;}
html,body{height:100%;font:11px/1 Verdana,sans-serif;}
input{border:1px solid #D7D7D7;}
#exContent{width:80%;margin:0 auto;padding-top:50px;text-align:left;}
/* EndStyle */
</style>
</head>
<body>
<div id="exContent">
<form action="" method="get">
<input name="myfile" size="1" type="file" />
</form>
</div>
</body>
</html>
Сначала, запакуем инпут в блок, зададим класс инпуту и блоку, и добавим дополнительный инпут в который, позже, будем выводить данные выбранного файла:
Code (HTML) <form action="" method="get">
<div class="file-input-box">
<input id="fileName" class="file-input-text" readonly="readonly" />
<input class="file-input" name="myfile" size="1" type="file" />
</div>
</form>
Задаём блоку фоновую картинку в виде кнопки и его габариты, а дополнительному инпуту обтекание и размеры.
Для всех инпутов в блоке зададим overflow:hidden; Фоновая картинка (кнопка):
 Стили: Code (CSS) .file-input-box,.file-input-box input{overflow:hidden;}
.file-input-box{position:relative;width:300px;height:24px;background:url('/_example/_test/fileinput/fileinputbutton.png')no-repeat right top;cursor:pointer;}
.file-input-text{float:left;height:20px;line-height:20px;width:215px;}
Результат:
Теперь, скроем до конца файл инпут, позиционируем его как нужно - под фоновую картинку, и пропишем размеры:Стили: Code (HTML) .file-input {position:absolute;right:0px;top:0px;width:81px;height:22px;font-size:99px;opacity:0;filter:alpha(opacity=0);cursor:pointer;}
Размеры файл-инпута равны размерам кнопки. а этими стилями - opacity:0;filter:alpha(opacity=0);- делаем его прозрачным. Результат:
И последнее, пишем маленький JavaScript, который при событии onchange инпутаtype="file" будет заполнять дополнительный текстовый инпут значением(названием выбранного файла) из инпута type="file".
И вешаем его на файл-инпут. Html-код: Code (HTML) <input class="file-input" name="myfile" size="1" type="file" onchange="document.getElementById('fileName').value=this.value;" />
Собираем всё вместе: Стили: Code (CSS)
*{margin:0;padding:0;border:none;outline:0;}
html,body{height:100%;font:11px/1 Verdana,sans-serif;}
input{border:1px solid #D7D7D7;}
#exContent{width:80%;margin:0 auto;padding-top:50px;text-align:left;}
.file-input-box,.file-input-box input{overflow:hidden;}
.file-input-box{position:relative;width:300px;height:24px;background:url(/_example/_test/fileinput/fileinputbutton.png)no-repeat right top;cursor:pointer;}
.file-input-text{float:left;height:20px;line-height:20px;width:215px;}
.file-input{position:absolute;right:0px;top:0px;width:81px;height:22px;font-size:99px;opacity:0;filter:alpha(opacity=0);cursor:pointer;}
HTML-код: Code (HTML) <form action="" method="get">
<div class="file-input-box">
<input id="fileName" class="file-input-text" readonly="readonly" />
<input class="file-input" name="myfile" size="1" type="file" onchange="document.getElementById('fileName').value=this.value;" />
</div>
</form>
Вся страница, на всякий ヅ: Code (HTML) <!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cтилизация файл-инпутов (тип file)</title>
<style type="text/css">
*{margin:0;padding:0;border:none;outline:0;}
html,body{height:100%;font:11px/1 Verdana,sans-serif;}
input{border:1px solid #D7D7D7;}
#exContent{width:80%;margin:0 auto;padding-top:50px;text-align:left;}
.file-input-box,.file-input-box input{overflow:hidden;}
.file-input-box{position:relative;width:300px;height:24px;background:url(/_example/_test/fileinput/fileinputbutton.png)no-repeat right top;cursor:pointer;}
.file-input-text{float:left;height:20px;line-height:20px;width:215px;}
.file-input{position:absolute;right:0px;top:0px;width:81px;height:22px;font-size:99px;opacity:0;filter:alpha(opacity=0);cursor:pointer;}
</style>
</head>
<body>
<div id="exContent">
<form action="" method="get">
<div class="file-input-box">
<input id="fileName" class="file-input-text" readonly="readonly" />
<input class="file-input" name="myfile" size="1" type="file" onchange="document.getElementById('fileName').value=this.value;" />
</div>
</form>
</div>
</body>
</html>
Результат:
☑ Живой пример cтилизации файл-инпута ... Проверено: Мозилла v3.6, v4.1, Opera v11, Safari 4.0, Хром v11, ИЕ v7, v8, v6. Для ИЕ v6 нужно дописать вот такой фильтр: Code (CSS) * html .file-input{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);}
Скриншот:
☑ Архив с примером и сопутствующими файлами ... 12.11 Kb
Источник: Cтилизация файл-инпутов,тип file,type=file,оформление инпутов,CSS,HTML,JavaScript,простой способ, пример,инструкция | 
