Jei jus domina „Webkit“ / „Blink“ / „Chrome“ specifinis stilius, yra paslėptas patentuotas pseudo elementas, tada naudokite ir nestandartinį „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); )
Demonstracija
Žiūrėkite „ChrisKoy Coyier“ (@chriscoyier) „CodePen“ tinkintų rinkmenų rinkmenas „WebKit“ / „Blink“
Teisingas įspėjimas: jis neparodo pasirinkto failo pavadinimo, tačiau galbūt galėsite jį pakoreguoti. Manau, kad šiais laikais jūs suaktyvinate įvykį pasirinkę failą ir vis tiek tokiu būdu užklijuojate duomenis.
WTF formos
Visada verta pasidomėti, kaip tai daro ir WTF:
Peržiūrėkite Chriso Coyierio (@chriscoyier) rašiklio failo įvestį iš WTF formų „CodePen“.