::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.

Das ::file-selector-button CSS Pseudoelement repräsentiert die Schaltfläche eines <input> mit type="file".

Probieren Sie es aus

Syntax

css
selector::file-selector-button

Beispiele

Einfaches Beispiel

HTML

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

CSS

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

Ergebnis

Beachten Sie, dass ::file-selector-button ein ganzes Element ist und als solches den Regeln des UA-Stylesheets entspricht. Insbesondere werden Schriftarten und Farben nicht unbedingt vom input-Element geerbt.

Fallback-Beispiel

HTML

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

CSS

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

Ergebnis

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch