Псевдоэлемент CSS `::file-selector-button`

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в разных версиях браузеров. Она поддерживается браузерами с апреля 2021 года.

::file-selector-button — это CSS-псевдоэлемент, представляющий кнопку элемента <input> типа type="file".

Попробуйте

input {
  margin-top: 1rem;
}

input::file-selector-button {
  font-weight: bold;
  color: dodgerblue;
  padding: 0.5em;
  border: thin solid grey;
  border-radius: 3px;
}

<label for="avatar">Choose a profile picture:</label><br />

<input id="avatar" type="file" name="avatar" accept="image/png, image/jpeg" />

Синтаксис

::file-selector-button {
  /* ... */
}

Примеры

Базовый пример

HTML

<form>
  <label for="fileUpload">Upload file</label>
  <input type="file" id="fileUpload" />
</form>

CSS

form {
  display: flex;
  gap: 1em;
  align-items: center;
}

input[type="file"]::file-selector-button {
  border: 2px solid #6c5ce7;
  padding: 0.2em 0.4em;
  border-radius: 0.2em;
  background-color: #a29bfe;
  transition: 1s;
}

input[type="file"]::file-selector-button:hover {
  background-color: #81ecec;
  border: 2px solid #00cec9;
}

Результат

Обратите внимание, что ::file-selector-button — это целый элемент, поэтому на него распространяются правила таблицы стилей пользовательского агента. В частности, шрифты и цвета не обязательно будут наследоваться от элемента input.

Пример с резервным вариантом

HTML

<form>
  <label for="fileUpload">Upload file</label>
  <input type="file" id="fileUpload" />
</form>

CSS

form {
  display: flex;
  gap: 1em;
  align-items: center;
}

input[type="file"]::file-selector-button {
  border: 2px solid #6c5ce7;
  padding: 0.2em 0.4em;
  border-radius: 0.2em;
  background-color: #a29bfe;
  transition: 1s;
}

input[type="file"]::-ms-browse:hover {
  background-color: #81ecec;
  border: 2px solid #00cec9;
}

input[type="file"]::-webkit-file-upload-button:hover {
  background-color: #81ecec;
  border: 2px solid #00cec9;
}

input[type="file"]::file-selector-button:hover {
  background-color: #81ecec;
  border: 2px solid #00cec9;
}

Результат

Спецификации

Спецификация
Модуль псевдоэлементов CSS, уровень 4 # file-selector-button-pseudo

Совместимость с браузерами

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari для iOS	Samsung Internet	WebView для Android	WebView для iOS
`file-selector-button`	89 1	89 79 12–79	82	75 15	14.1 3	89 18	82	63 14	14.5 1	15.0 1.0	89 4.4	14.5 1

См. также

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::file-selector-button