Si vous êtes intéressé par le style spécifique de Webkit / Blink / Chrome, il existe un pseudo élément propriétaire à masquer, puis utilisez un psudeo-on-an-input également 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); )Démo
Voir les entrées de fichier personnalisées du stylet dans WebKit / Blink par Chris Coyier (@chriscoyier) sur CodePen
Avertissement juste: il ne vous montre pas le nom du fichier sélectionné, mais vous pourrez peut-être le modifier pour le faire. Je trouve généralement que ces jours-ci, vous déclenchez un événement après la sélection de fichiers et accrochez les données de toute façon.
Formulaires WTF
Il vaut toujours la peine de vérifier comment les formulaires WTF le font également:
Voir l'entrée de fichier Pen à partir de formulaires WTF par Chris Coyier (@chriscoyier) sur CodePen.