CSS/Selektoren/file-selector-button

Browserunterstützung
caniuse.com

Der ::file-selector-button-Selektor ist ein Pseudoelement, welches den Button eines input type="file"-Elements repräsentiert.

Syntax

:file-selector-button {}

anwendbar auf

* input type="file"

Beispiel

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

 

Beachten Sie: ::file-selector-button stellt ein eigenes Element dar und entspricht somit den Regeln aus dem UA-Stylesheet. Insbesondere werden Schriftarten und Farben nicht unbedingt vom Eingabeelement übernommen.

Siehe auch

• File Upload

Weblinks

• CSSWG: :file-selector-button Selectors Level 4
• MDN: :file-selector-button
• Browser-Support: caniuse.com