Как стилизовать input[type=file] нативным javascript?

Question

[tvelforce]

Пытаюсь стилизовать, но возникают проблемы если на странице несколько форм.
Пытаюсь прогнать массивом, но всё тщетно.
jsfiddle.net/cq4s8spq/1/embedded/js,html,css,result/dark/

Отладчик жалуется: "Cannot read property 'querySelector' of undefined at HTMLDivElement.fileBox.(anonymous function).querySelector.onclick".
Буду благодарен за помощь.

Comments

[Dark Hole]

А что вы пытаетесь сделать?

Answer 1

[Дмитрий Лузанов]

Зачем JS? Оберните не в div.poster а в label.poster.

Либо кнопку сделайте как label с атрибутом for в котором ссылка на id input'a.

Либо сделать так:

<label class="button fileButton">
    Загрузить
    <input type="file" class="fileInput" name="files" />
</label>

Comments

[tvelforce]

Это конечно круто, но эти формы генерируются и их может быть неограниченное количество. Так что приходится справляться без ID.

[Дмитрий Лузанов]

tvelforce а в чем проблема генерировать id? Либо по первому сценарию, что я описал.

[Сергей delphinpro]

tvelforce: рандом сломался? =) генерьтe рандомный ID

[Степан Крапивин]

я тут мимо проходил... Зачем вы ставите слеш в конце инпута?