::file-selector-button

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

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

Try it

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

Result

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

Result

Specifications

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

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on 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

See also

© 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