Как у input «file» убрать дефолтный значек?

Question

[Спартак]

Привет всем. Люди, помогите мне разобраться с input type="file" , мне нужно в label оставить ПУСТОЕ белое поле, но с взаимодействием, чтобы можно было выбрать файл. Никак не могу сделать его, может кто более опытный мне подскажет как это реализовать. Я смог только убрать блок стандартный, а дальше тупик...
https://skr.sh/sFWAqH8yP8j Так по макету мне нужно. https://skr.sh/sFWJ5DvPyAO Нужно убрать штатные надписи браузера.

Answer 1

[Надим]

Делайте поле input невидимым через css стиль dispay: none. Выбор файлов осуществляете через клик по привязанному к полю input тегу label. Названия выбранных файлов выводите JavaScript-ом.

Answer 2

[Спартак]

Вопрос решился просто добавлением свойства , font-size: 0px; и content-visibility: hidden;

Answer 3

[Dino Winchester]

При создании своих версий input file, input radio, select и прочих нативных элементов, нужно учитывать многие детали, без реализации и настройки которых компонент будет просто красивой свистелкой без полноценного функционала.

Вот небольшой пример кастомного </input type="file">:



Тут конечно есть ещё над чем поработать, но основа уже есть.