Ja jūs interesē Webkit / Blink / Chrome specifisks stils, ir paslēpts patentēts pseido elements un pēc tam izmantojiet arī nestandarta 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); )Demonstrācija
Skatiet Krāsa Koijera (@chriscoyier) PenPad pielāgoto failu ievades WebKit / Blink vietnē CodePen
Pareizs brīdinājums: tas neparāda izvēlēto faila nosaukumu, taču, iespējams, jūs to varēsit pielabot, lai to izdarītu. Es parasti uzskatu, ka mūsdienās jūs aktivizējat notikumu pēc faila izvēles un tik un tā saķerat datus.
WTF veidlapas
Vienmēr ir vērts pārbaudīt, kā WTF formas to arī dara:
Skatiet Krista Koijera (@chriscoyier) pildspalvas faila ievadi no WTF veidlapām vietnē CodePen.