::file-selector-button

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

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

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

Попробовать

Синтаксис

selector::file-selector-button

Примеры

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

HTML

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

CSS

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

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 Pseudo-Elements Module Level 4 # file-selector-button-pseudo

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`::file-selector-button`	891	897912–79	82	7515	14.13	8918	82	6314	14.51	15.01.0	894.4

См. также

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