::file-selector-button

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

Note: Older versions of WebKit/Blink compatible browsers like Chrome, Opera and Safari (indicated by the -webkit prefix) supported a non-standard pseudo-element ::-webkit-file-upload-button.

Legacy Edge and later versions of IE supported a non-standard pseudo-element ::-ms-browse.

Both of these pseudo-elements serve the same purpose as ::file-selector-button.

Syntax

selector::file-selector-button

Examples

Basic example

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

Result

Example with fallback for older browsers supporting the -webkit and -ms prefixes. 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.

Fallback example

HTML

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

CSS

input[type=file]::-ms-browse {
  border: 2px solid #6c5ce7;
  padding: .2em .4em;
  border-radius: .2em;
  background-color: #a29bfe;
}

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

Result

Specifications

Specification
CSS Pseudo-Elements Module Level 4 (CSS Pseudo-Elements 4)
# file-selector-button-pseudo

Browser compatibility

BCD tables only load in the browser

See also