Были ли у вас случаи, когда дизайнер нарисовал элемент формы для выбора файла, отличный от стандартного, и заказчик требует 100% соответствия? Нет? Тогда вам пока повезло!
Дело в том, что поле выбора файла для загрузки <input type="file" ... /> практически не поддается стилизации через CSS. Т.е мы можем изменить только значения вроде обрамляющей рамки, размера шрифта, и практически всё.
Этот элемент формы идет уже «склеенный» вместе с кнопкой «Choose file» (открывающей окно выбора файла), вид этого поля также различается практически во всех браузерах, а текст в кнопке по всей видимости, зависит также от языка в системе.
Так вот, немного поразмыслив, и «взвесив» всё, что мы имеем в арсенале CSS, выход всё-таки нашелся! И главное ключевое звено в нём — прозначность (opacity), которая фактически кроссбраузерна.
Если мы выставляем прозрачность в ноль, то элемента не видно на странице, но по нему всё еще можно кликнуть, укусить, пощупать. Т.е он остается полноценным функциональным узлом на странице.

Таким образом, совершая нехитрые манипуляции и ритуальный танец с бубном с позиционированием элементов, размером шрифта в поле выбора файла и кое-какими другими свойствами CSS мы можем добиться желающего.
Что нам еще понадобиться: одна штука <input type="text"> (но подойдет и любой другой элемент для информирования о выбранном файле), кнопка для открытия окна выбора файла (в примере <input type="button">) и непосредственном сам элемент <input type="file">.

Что же мы со всем этим делаем? Коротко говоря:

• создаем один родительский контейнер с position:relative (чтобы выравнивать относительно него блоки с асболютным позиционированием)


• распологаем информационное поле ввода по всему блоку (input type="text")


• объединяем еще в один контейнер поля ввода (кнопку и выбор файла), выставляем ему тоже position:relative и сдвигаем его за пределы основного блока вправо, на значение собственной ширины (+ отступ)


• для поля ввода type="file" выставляем кросс-браузерную прозрачность и огромный шрифт (чтобы увеличить размер самой кнопки элемента, по клику которой открывается окно для выбора файла), выставляем асболютное позиционирование для элемента и помещаем его «вверх и вправо» (относительно контейнера <span class="file">)


• вешаем обработчик события в Javascript «onchange» на настоящее поле ввода (которое прозрачно), для того, чтобы можно было после выбора файла информировать о том, что за файл был выбран, в любой другой элемент на странице (в данном случае input type="text")

Всё что было сказано выше на словах, переведено ниже в HTML/CSS код и отлично, кроссбраузерно работает:

<style type="text/css">

	.attach { position:relative; width:400px; height:30px; }

	.attach #file_fake { width:100%; height:85%; cursor:default; color:gray; //padding:2px 0; }

	.attach span.file { position:absolute; right:-125px; top:0; width:115px; height:100%; overflow:hidden; }

	.attach span.file * { cursor:pointer; }

	.attach span.file:hover * { color:gray; }

	.attach input.file_select_btn { overflow:visible; width:100%; height:100%; }

	.attach input.file_select { position:absolute; font-size:150px; right:0; top:0; opacity:0; -moz-opacity:0; filter:alpha(opacity=0); }

</style>



<div class="attach"> 

	<input id="file_fake" type="text" readonly="readonly" value="Тут будет имя выбранного файла" /> 

	<span class="file" title="Выбрать файл">

		<input type="file" name="attach" class="file_select" onchange="document.getElementById('file_fake').value = this.value">

		<input type="button" class="file_select_btn" value="Выбрать файл" title="Вместо этого элемента вы можете подставить любой другой" />

	</span>

</div>

Смотреть готовый пример