::file-selector-button

::file-selector-button — псевдоэлемент, представляющий кнопку внутри поля <input type="file">. Позволяет стилизовать её так же, как любую кнопку интерфейса: менять фон, бордеры, скругления, состояния наведения/фокуса и другие стили.

        
          
          <label>  Загрузить файл  <input class="uploader" type="file"></label>
          <label>
  Загрузить файл
  <input class="uploader" type="file">
</label>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          .uploader::file-selector-button {  margin-right: 1rem;  padding: 0.5rem 0.75rem;  border: 1px solid #2e6be6;  border-radius: 0.5rem;  background: #2e6be6;  color: white;  font: inherit;  cursor: pointer;}.uploader::file-selector-button:hover {  background: #1f4fb3;  border-color: #1f4fb3;}.uploader::file-selector-button:focus {  outline: 2px solid #94b6ff;  outline-offset: 2px;}
          .uploader::file-selector-button {
  margin-right: 1rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #2e6be6;
  border-radius: 0.5rem;
  background: #2e6be6;
  color: white;
  font: inherit;
  cursor: pointer;
}

.uploader::file-selector-button:hover {
  background: #1f4fb3;
  border-color: #1f4fb3;
}

.uploader::file-selector-button:focus {
  outline: 2px solid #94b6ff;
  outline-offset: 2px;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Селектор вида:

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

• Работает только на элементах <input type="file">.
• Кнопка ::file-selector-button по умолчанию может не наследовать шрифт от элемента <input> или его родительских элементов. Чтобы кнопка выглядела единообразно с остальным интерфейсом, явно задайте ей font: inherit или другие шрифтовые свойства.
• Поддерживаются обычные состояния: :hover, :active, :focus, :disabled и медиавыражения.

По умолчанию браузер рисует системную кнопку «Выбрать файл». Псевдоэлемент ::file-selector-button даёт контроль над её оформлением, не ломая семантику и доступность. Текст внутри кнопки задаётся браузером/локалью и не изменяется CSS — это особенность системного элемента.

💡 Задавайте font: inherit, чтобы кнопка выглядела консистентно с остальными элементами формы.
💡 Контролируйте размеры через padding, а высоту входа — через line-height и font-size.
💡 Для лучшей доступности обеспечьте заметные стили фокуса (outline, outline-offset).
💡 Для старых браузеров можно добавить префиксные аналоги: ::-webkit-file-upload-button (WebKit) и ::-ms-browse (устаревший IE/Edge).