Pasirinktinis failo įvesties stilius - CSS-gudrybės

Turinys

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“.

Įdomios straipsniai...