::file-selector-button

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

WebKit/Blink compatible browsers like Chrome, Opera and Safari (indicated by the -webkit prefix) support a non-standard pseudo-class ::-webkit-file-upload-button which serves the same purpose.

Syntax

selector::file-selector-button

Examples

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: .2em .4em;
  border-radius: .2em;
  background-color: #a29bfe;
  transition: 1s;
}
 
input[type=file]::file-selector-button:hover {
  background-color: #81ecec;
  border: 2px solid #00cec9;
}

Example with fallback for browsers supporting the -webkit prefix. Note that as a selector you will need to write out the whole code block twice, as an unrecognized selector invalidates the whole list.

Note that ::file-selector-button is a whole element, and as such matches the rules from the UA stylesheet. In particular, fonts and colors won't necessarily inherit from the input element.

HTML

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

CSS

input[type=file]::-webkit-file-upload-button {
  border: 2px solid #6c5ce7;
  padding: .2em .4em;
  border-radius: .2em;
  background-color: #a29bfe;
  transition: 1s;
}

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

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;
}

Specifications

The pseudo-element has been resolved on by the CSS WG however the edit has not yet been made in a specification.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
::file-selector-buttonChrome No support No
No support No
Full support 1
Alternate Name
Alternate Name Uses the non-standard name: ::-webkit-file-upload-button
Edge No support No
No support No
Full support 79
Alternate Name
Alternate Name Uses the non-standard name: ::-webkit-file-upload-button
Firefox Full support 82IE No support NoOpera No support No
No support No
Full support 15
Alternate Name
Alternate Name Uses the non-standard name: ::-webkit-file-upload-button
Safari No support No
No support No
Full support 3
Alternate Name
Alternate Name Uses the non-standard name: ::-webkit-file-upload-button
WebView Android No support No
No support No
Full support 1
Alternate Name
Alternate Name Uses the non-standard name: ::-webkit-file-upload-button
Chrome Android No support No
No support No
Full support 18
Alternate Name
Alternate Name Uses the non-standard name: ::-webkit-file-upload-button
Firefox Android Full support 82Opera Android No support No
No support No
Full support 14
Alternate Name
Alternate Name Uses the non-standard name: ::-webkit-file-upload-button
Safari iOS No support No
No support No
Full support 1
Alternate Name
Alternate Name Uses the non-standard name: ::-webkit-file-upload-button
Samsung Internet Android No support No
No support No
Full support 1.0
Alternate Name
Alternate Name Uses the non-standard name: ::-webkit-file-upload-button

Legend

Full support  
Full support
No support  
No support
Uses a non-standard name.
Uses a non-standard name.

See also