Firefox Tomorrow

css pseudo element

`::file-selector-button` CSS pseudo-element

View on MDN ↗

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

Interactive exampleOpen the canonical MDN source to run this embedded demo.
input {
  margin-top: 1rem;
}

input::file-selector-button {
  font-weight: bold;
  color: dodgerblue;
  padding: 0.5em;
  border: thin solid grey;
  border-radius: 3px;
}

<label for="avatar">Choose a profile picture:</label><br />

<input id="avatar" type="file" name="avatar" accept="image/png, image/jpeg" />

Syntax

::file-selector-button {
  /* ... */
}

Examples

Basic example

HTML

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

CSS

form {
  display: flex;
  gap: 1em;
  align-items: center;
}

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

Interactive exampleOpen the canonical MDN source to run this embedded demo.

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

form {
  display: flex;
  gap: 1em;
  align-items: center;
}

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

Interactive exampleOpen the canonical MDN source to run this embedded demo.

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also