Как оформить поле выбора файла
Короткий ответ
Кнопку внутри поля оформляет псевдоэлемент ::file-selector-button:
<style>
input[type="file"]::file-selector-button { margin-right: 12px; padding: 8px 16px; border: 0; border-radius: 8px; background: steelblue; color: white; font: inherit; cursor: pointer; }
input[type="file"]::file-selector-button:hover { background: navy; }
</style>
<input type="file">Текст рядом с кнопкой («Файл не выбран») браузер пишет сам, его стили задаются у самого <input>.
Какие файлы принимать
accept ограничивает выбор нужными типами, а multiple разрешает выбрать несколько файлов сразу:
<label>Photos: <input type="file" accept="image/*" multiple></label>Ограничение работает только в окне выбора. Сервер всё равно должен проверять, что ему прислали.
Своя кнопка через label
Если поле нужно оформить совсем по-своему, спрячьте его визуально и сделайте кнопкой <label>: щелчок по подписи открывает выбор файла.
<style>
.upload input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.upload span { display: inline-block; padding: 10px 18px; border: 2px dashed steelblue; border-radius: 8px; cursor: pointer; }
.upload input:focus-visible + span { outline: 2px solid orange; }
</style>
<label class="upload"><input type="file"><span>📎 Attach a file</span></label>Частая ошибка
Поле прячут через display: none или hidden. Мышью кнопка-подпись работает, но с клавиатуры до неё не добраться: скрытое так поле выпадает из порядка Tab. Прячьте поле визуально, как в примере выше.