Tạo kiểu đầu vào tệp tùy chỉnh - Thủ thuật CSS

Nếu bạn quan tâm đến kiểu cụ thể của Webkit / Blink / Chrome, thì có một phần tử giả độc quyền cần ẩn và sau đó sử dụng một đầu vào psudeo-on-an cũng không chuẩn:

.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); )

Bản giới thiệu

Xem Đầu vào tệp tùy chỉnh bằng bút trong WebKit / Blink của Chris Coyier (@chriscoyier) trên CodePen

Cảnh báo hợp lý: nó không hiển thị cho bạn tên tệp đã chọn, nhưng bạn có thể tinh chỉnh nó để làm điều đó. Tôi thấy rằng những ngày này thường bạn đang kích hoạt một sự kiện sau khi chọn tệp và vẫn lấy dữ liệu theo cách đó.