Widely availableSupported across all major browsers. Safe to use in production.
Selectors Widely available

::file-selector-button

The ::file-selector-button CSS pseudo-element selects the button of a <input type="file"> element.

Selectors

Overview

The ::file-selector-button CSS pseudo-element selects the button of a <input type="file"> element.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:file-selector-button
89
89
82
14.1
89
14.5
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: ::-webkit-file-upload-button (1)
Notes 3 item(s)
Implementation note
  • Previously available under a different name: ::-webkit-file-upload-button (79)
  • Previously available under a different name: ::-ms-browse (12)
Removed
  • This feature was removed in a later browser version (79)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: ::-webkit-file-upload-button (3)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: ::-webkit-file-upload-button (18)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: ::-webkit-file-upload-button (1)

Syntax

CSS 
input[type="file"]::file-selector-button {
  background: #2563eb;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
}

input[type="file"]::file-selector-button:hover {
  background: #1d4ed8;
}

Live demo

Custom styles

::file-selector-button customstyle demo.

PreviewFullscreen

rounded only. existsdesign

::file-selector-button rounded only. existsdesign demo.

PreviewFullscreen

outlinestyle

::file-selector-button outlinestyle demo.

PreviewFullscreen

Use cases

  • Using ::file-selector-button

    The ::file-selector-button CSS pseudo-element selects the button of a <input type="file"> element.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links

Powered by web-features