wps.su

<style type="text/css">
    .file-area {
        position: relative;
        width: 250px;
        height: 50px;
    }
    .fake-file {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        background: url("file-background.png")
    }
</style>
<form method="post">
    <div class="file-area">
        <input type="file" name="file" class="file-field" />
        <div class="fake-file"></div>
    </div>
    ...
</form>
<script type="text/javascript">
    $(".fake-file").click(function() {
        $(".file-field").click();
    })
</script>

Такой вариант позволял ставить в качестве декорации файл-инпута картинку любого размера, всё работало в таких браузерах, как Firefox, Opera, Chrome. Однако в IE при попытке сделать submit формы, которая содержала стилизуемый инпут, возникала ошибка "Access is denied".

После поиска информации по данной теме, выяснилось, что причиной ошибки является политика безопасности IE. В частности, IE не позволяет манипулировать полем типа file при помощи javascript. И если javascript используется для того, чтобы установить путь к файлу в поле типа file, или событие click для показа диалога выбора файла вызывается из javascript, то IE не позволит сделать submit формы. Таким образом, стало понятно, что текущее решение не подходит.

Альтернатива заключается в том, чтобы расположить инпут типа file над элементом, содержащим нужный фон и сделать инпут полностью прозрачным. Но здесь тоже существует трудность, связанная с тем, что не во всех браузерах мы можем подогнать размер инпута под размер фона при помощи css: это означает, что какое-то количество пикселей может оказаться некликабельным.