::file-selector-button

Das ::file-selector-button in CSS ist ein Pseudoelement, das <input type="file"> in HTML auswählt.

input::file-selector-button {
  background-color: #f8a100;
}

Sie sind zweifellos auf Datei-Upload-Eingabefelder gestoßen – sie sind sehr verbreitet, insbesondere wenn Sie Dateianhänge in einem Formular einfügen möchten, wie z. B. eine PDF-Datei oder ein Bild.

Syntax

selector::file-selector-button { }

Sie müssen das Element nicht vor dem Pseudoelement angeben

/* This works */
input[type="file"]::file-selector-button{ }

/* But this is more concise */
::file-selector-button{ }

Natürlich werden damit alle Dateiauswahlfelder global gestylt. Wenn Sie versuchen, eine einzelne Instanz eines Dateiauswahlfeldes anzusprechen, dann möchten Sie einen Selektor einfügen, der dazu passt.

Kompatible CSS-Eigenschaften

::file-selector-button funktioniert mit jeder gültigen CSS-Eigenschaft.

Spezifikation

Das ::file-selector-button ist in der CSS Pseudo-Elements Module Level 4 Spezifikation definiert. (Hier ist das Originalticket dazu.)

Der Button ist Teil des Shadow DOM

Der Datei-Upload-Button befindet sich im Shadow DOM. Wie ein <iframe>, lecken Selektoren und Stile innerhalb eines Shadow DOM-Knotens nicht nach außen aus dem Shadow-Root heraus. Ebenso lecken Stile von außerhalb des Shadow-Roots nicht hinein.

Das gilt auch für Datei-Upload-Buttons. ::file-selector-button gibt uns begrenzten Zugriff auf die Gestaltung des Buttons. Er ist begrenzt, da es keine Möglichkeit gibt, den Platzhaltertext "Keine Datei ausgewählt" neben dem Button zu gestalten. Beachten Sie auch, dass der Text nicht auswählbar ist.

Eine weitere Sache, die man hier beim Shadow DOM beachten sollte, ist, dass das Gestalten des Datei-Upload-Buttons in Web Components – die Elemente in einem Shadow DOM-Knoten einbetten – fehlschlägt, da die gekapselten Stile nicht aus der Komponente und in einen anderen Shadow DOM-Knoten lecken können, wie von Hayato Ito erklärt.

Animationen sind tabu

Obwohl das offizielle Dokument besagt:

Es gibt keine Einschränkung, welche Eigenschaften für das ::file-selector-button Pseudoelement gelten.

…habe ich festgestellt, dass das Pseudoelement nicht animiert werden kann. Vielleicht hat es weniger mit der animation-Eigenschaft zu tun und mehr damit, dass @keyframes inkompatibel sind? Wie auch immer, ich habe ein Problem gemeldet, dem Sie folgen können, falls es in dieser Hinsicht Fortschritte gibt.

Demo

Ich bin auf eine CodePen-Demo mit schönen Hover-Effekten für Buttons gestoßen, die Box-Schatten verwenden, um die Hintergrundfarbe des Buttons zu füllen, und dachte, ich wende dies auf eine Datei-Eingabe an, um zu demonstrieren, was mit ::file-selector-button möglich ist

Browser-Unterstützung

IE	Edge	Firefox	Chrome	Safari	Opera
10-11	89	82	89	14.1	75

iOS Safari	Android Chrome	Android Firefox	Android Browser	Opera Mobile
14.5	104	101	104	64

Frühere Versionen von Safari, Chrome und Opera verwendeten eine Präfix-Version des Pseudoselektors, ::-webkit-file-upload-button. Ebenso verließen sich ältere Versionen von Edge und Internet Explorer auf ::-ms-browse. Wenn Sie also nach einer soliden Möglichkeit suchen, die maximale Browserunterstützung sicherzustellen, hier ist Ihr Rezept

/* Fallback for Safari, Chrome, and Opera */
input[type="file"]::-webkit-file-upload-button {
  background-color: #f8a100;
}
/* Fallback for Legacy Edge and IE */
input[type="file"]::-ms-browse {
  background-color: #f8a100;
}
/* Standard */
input[type="file"]::file-selector-button {
  background-color: #f8a100;
}