Anpassad styling för filinmatning - CSS-tricks

Om du är intresserad av Webkit / Blink / Chrome-specifik styling finns det ett eget pseudo-element att dölja och sedan använda en icke-standardiserad psudeo-på-en-ingång:

.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

Se penna anpassade filinmatningar i WebKit / Blink av Chris Coyier (@chriscoyier) på CodePen

Rätt varning: det visar inte det valda filnamnet, men du kan kanske justera det för att göra det. Jag tycker vanligtvis att du idag utlöser en händelse efter filval och snaggar data på det sättet ändå.