Справочник HTML & CSS

::file-selector-button

Кнопка «Выберите файл» внутри `<input type="file">`; позволяет оформить её как остальные кнопки на странице.

Синтаксис

input[type=file]::file-selector-button { … }

Примеры

Поле выбора файла с оформленной кнопкой:

<style>
  input[type="file"]::file-selector-button {
    margin-right: 12px; padding: 6px 14px;
    border: none; border-radius: 6px;
    background: teal; color: white; cursor: pointer;
  }
  input[type="file"]::file-selector-button:hover { background: darkslategray; }
</style>
 
<input type="file">

Примечания

Текст рядом с кнопкой («Файл не выбран») отдельно не стилизуется — он берёт шрифт и цвет у <input>. Надпись на кнопке задаёт браузер на своём языке. Поддерживается всеми актуальными браузерами с 2021 года.

См. также

<input> — Поле ввода; вид поля задаёт атрибут `type`.
<button> — Кнопка: отправляет форму или запускает действие.
appearance — Отключает встроенный вид элементов формы, чтобы оформить их с нуля.
::placeholder — Текст-подсказка поля из атрибута `placeholder`.

В учебнике

Оформление форм — Как оформить поля и кнопки — отступы и рамки, состояние фокуса, подсказка, выключенные и ошибочные поля, accent-color и свои флажки через appearance: none.

Спасибо, что читаете!