Προσαρμοσμένο στυλ εισαγωγής αρχείου - CSS-Κόλπα

Εάν σας ενδιαφέρει το στυλ Webkit / Blink / Chrome, υπάρχει ένα ιδιόκτητο ψευδο στοιχείο για απόκρυψη και, στη συνέχεια, χρησιμοποιήστε ένα μη τυπικό 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); )

Διαδήλωση

Δείτε τις Προσαρμοσμένες Εισαγωγές Αρχείων Πένας στο WebKit / Blink από τον Chris Coyier (@chriscoyier) στο CodePen

Δίκαιη προειδοποίηση: δεν σας δείχνει το όνομα του αρχείου που έχετε επιλέξει, αλλά μπορεί να μπορείτε να το τροποποιήσετε για να το κάνετε αυτό. Βρίσκω συνήθως αυτές τις μέρες ενεργοποιείτε ένα συμβάν μετά την επιλογή αρχείων και εμπλουτίζετε τα δεδομένα έτσι.