Wenn Sie an Webkit / Blink / Chrome-spezifischem Styling interessiert sind, müssen Sie ein proprietäres Pseudoelement ausblenden und dann ein ebenfalls nicht standardmäßiges Psudeo-on-an-Input verwenden:
.custom-file-input::-webkit-file-upload-button ( visibility: hidden; ) .custom-file-input::before ( content: 'Select some files'; display: inline-block; background: linear-gradient(top, #f9f9f9, #e3e3e3); border: 1px solid #999; border-radius: 3px; padding: 5px 8px; outline: none; white-space: nowrap; -webkit-user-select: none; cursor: pointer; text-shadow: 1px 1px #fff; font-weight: 700; font-size: 10pt; ) .custom-file-input:hover::before ( border-color: black; ) .custom-file-input:active::before ( background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9); )Demo
Weitere Informationen finden Sie in den benutzerdefinierten Stifteingaben des Stifts in WebKit / Blink von Chris Coyier (@chriscoyier) auf CodePen
Faire Warnung: Der ausgewählte Dateiname wird nicht angezeigt, aber Sie können ihn möglicherweise anpassen, um dies zu tun. Ich finde heutzutage normalerweise, dass Sie nach der Dateiauswahl ein Ereignis auslösen und die Daten trotzdem auf diese Weise abfangen.
WTF-Formulare
Es lohnt sich immer herauszufinden, wie WTF-Formulare dies auch tun:
Siehe die Eingabe der Stiftdatei aus WTF-Formularen von Chris Coyier (@chriscoyier) auf CodePen.