Đặt chiều rộng <input type = "file"> thống nhất trong tất cả các trình duyệt

Question

Cần có sự kết hợp nào của CSS hoặc thuộc tính?

Answer 1

• Ẩn kiểm soát thực tế
• Made một DIV với các điều khiển và phong cách mà bạn muốn trên đầu trang của nó

Nút không phải là một điều khiển HTML chuẩn.

Xem: http://www.quirksmode.org/dom/inputfile.html

Answer 2

gì sai với

<input type="file" size="50" .... /> 

? sẽ trông như nhau ngoại trừ Safari trên mac tôi đoán (trên mac, tất cả các điều khiển tải lên trông khác nhau, trên tất cả các trình duyệt)

Answer 3

Ngoài các hướng dẫn quirksmode, đây là một nguồn lực tốt: http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

Nếu bạn ẩn điều khiển thực tế, hãy nhớ rằng nó là rất quan trọng để thiết lập độ mờ đục của điều khiển bằng không, và không thực sự sử dụng visibility: hidden. Làm như vậy sẽ ẩn phần tử, vô hiệu hóa thao tác nhấp chuột.

Ngoài ra, nếu bạn đang che mất điều khiển bằng nút đồ họa, hãy lưu ý rằng trong một số trình duyệt (Firefox và IE, tôi tin), bạn sẽ không thể thay đổi loại con trỏ thành bàn tay khi nó trên phần nhập văn bản của điều khiển tệp (nó sẽ luôn luôn mặc định cho đầu vào hoặc con trỏ không liên kết thông thường). Và có, tôi đã thử sử dụng cursor: pointer (và cursor: hand).

Cá nhân, tôi đã vật lộn với các hộp tải lên tùy chỉnh và không có dấu đầu dòng bạc nào để hiển thị hoặc tùy chỉnh hoàn hảo của chúng. (đặc biệt là liên quan đến hành vi của con trỏ, khi tôi xem xét giao diện người dùng giao dịch người dùng). Vào cuối ngày, tôi nghĩ rằng việc chấp nhận rằng các trình duyệt khác nhau sẽ dễ dàng hơn khi thực hiện điều khiển khác nhau, và đó chỉ là cách thực hiện.