Als je geïnteresseerd bent in Webkit / Blink / Chrome-specifieke styling, is er een gepatenteerd pseudo-element om te verbergen en gebruik dan een ook niet-standaard psudeo-on-an-input:
.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
Zie de Pen Custom File Inputs in WebKit / Blink door Chris Coyier (@chriscoyier) op CodePen
Eerlijke waarschuwing: het toont je de geselecteerde bestandsnaam niet, maar je kunt het misschien aanpassen om dat te doen. Ik merk dat je tegenwoordig meestal een gebeurtenis activeert na bestandsselectie en de gegevens toch op die manier vasthoudt.
WTF-formulieren
Altijd de moeite waard om te bekijken hoe WTF-formulieren het ook doen:
Zie de Pen File Input van WTF Forms door Chris Coyier (@chriscoyier) op CodePen.