Se sei interessato allo stile specifico di Webkit / Blink / Chrome, c'è uno pseudo elemento proprietario da nascondere, e quindi usa un psudeo-on-an-input anche non standard:
.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
Vedi gli input di file personalizzati della penna in WebKit / Blink di Chris Coyier (@chriscoyier) su CodePen
Avviso equo: non ti mostra il nome del file selezionato, ma potresti essere in grado di modificarlo per farlo. Trovo che in genere in questi giorni stai attivando un evento dopo la selezione del file e catturando comunque i dati in quel modo.
Moduli WTF
Vale sempre la pena controllare come i moduli WTF lo fanno anche:
Vedere l'input del file penna da WTF Forms di Chris Coyier (@chriscoyier) su CodePen.