::file-selector-button
The ::file-selector-button CSS pseudo-element represents the button of an <input> of type="file".
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 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
Use cases
-
Using ::file-selector-button
The ::file-selector-button CSS pseudo-element represents the button of an <input> of type="file".
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.