Замена стандартного input type="file"

1. Решение на чистом CSS без JavaScript

Исходный код этого примера:

<style>
div.fileinputs {
	position: relative;
}
div.fakefile {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
input.file {
	position: relative;
	text-align: right;
	opacity: 0;
	z-index: 2;
}
</style>
<div class="fileinputs">
	<input type="file" class="file">
	<div class="fakefile">
		<input>
		<img src="button_select.gif">
	</div>
</div>

2. Универсальное решение на JavaScript

Функция автоматичски проходит по всем input type="file" и заменяет стандартную кнопку выбора файла на картинку search.gif.

var W3CDOM = (document.createElement && document.getElementsByTagName);
function initFileUploads() {
    if (!W3CDOM) return;
    var fakeFileUpload = document.createElement('div');
    fakeFileUpload.className = 'fakefile';
    fakeFileUpload.appendChild(document.createElement('input'));
    var image = document.createElement('img');
    image.src='button_select.gif';
    fakeFileUpload.appendChild(image);
    var x = document.getElementsByTagName('input');
    for (var i=0;i<x.length;i++) {
        if (x[i].type != 'file') continue;
        //if (x[i].parentNode.className != 'fileinputs') continue;
        x[i].className = 'file hidden';
        var clone = fakeFileUpload.cloneNode(true);
        x[i].parentNode.appendChild(clone);
        x[i].relatedElement = clone.getElementsByTagName('input')[0];
        x[i].onchange = x[i].onmouseout = function () {
            this.relatedElement.value = this.value;
        }
    }
}

Оригинал - https://www.quirksmode.org/dom/inputfile.html