Разместить кнопку поверх кнопки type=file с произвольным текстом. ⇐ CSS

[Anonymous]

Я пытаюсь создать иллюзию пользовательской кнопки загрузки файла, поскольку CSS для ограничен и требует усилий. В настоящее время я использую приведенный ниже код:
HTML

Код: Выделить всё

Upload File

CSS

Код: Выделить всё

.docuploadbtn {
opacity: 0;
}

.uploadcontainer {
width: 100px;
}

Комбинация этого кода показывает кнопку, за которой находится «скрытая» кнопка загрузки вверху, но при этом текст «Загрузить файл» под ней помещается, создавая кнопку большего размера, чем обычно. .
Вот как это выглядит сейчас:
[img]https://i. stack.imgur.com/QDZDa.png[/img]

И вот как я хочу, чтобы это выглядело:


Что я могу попробовать дальше?

Подробнее здесь: https://stackoverflow.com/questions/351 ... ustom-text