Ak vás zaujíma špecifický štýl Webkit / Blink / Chrome, existuje skrytý pseudoprvok, ktorý môžete skryť a potom použiť aj neštandardný vstup psudeo-on-an:
.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); )Ukážka
Prezrite si vstupy vlastných súborov do pera vo WebKit / Blink od Chrisa Coyiera (@chriscoyier) na CodePen
Spravodlivé varovanie: neukazuje vám vybraný názov súboru, ale možno ho budete môcť doladiť. Zdá sa mi, že v dnešnej dobe zvyčajne spúšťate udalosť po výbere súboru a rovnako tak zachytíte údaje.
Formuláre WTF
Vždy stojí za to skontrolovať, ako to formuláre WTF tiež robia:
Prečítajte si vstup do súboru pera z formulárov WTF od Chrisa Coyiera (@chriscoyier) na stránke CodePen.