Làm cách nào để hiển thị X (Xóa) trong INPUT của Chrome bằng loại NUMBER?

Question

Tôi tạo ra một ứng dụng có sử dụng một đầu vào, số loại:

<input type="number" min="-1000000" max="1000000" step="0.01"> 

Trong IE, điều này có một chút "rõ ràng" hoặc [X] ở bên phải. Người dùng của tôi thấy điều này rất có giá trị vì họ nhập số lớn vào các trường này và thường muốn xóa chúng bằng một lần nhấp.

Nó chỉ ra rằng một số người dùng thích Chrome như trình duyệt của họ. Tuy nhiên, trong Chrome, hộp văn bản này hiển thị "spinner", là mũi tên lên/xuống. Điều này là không sử dụng ở đây bởi vì họ sẽ không tăng số lượng lớn này lên 1 cent để đạt được mục tiêu.

Tôi có thể tìm kiếm và tìm thông tin về cách ẩn "spinner" trong chrome và tôi cũng thấy rằng hộp nhập tìm kiếm có thể cung cấp cho tôi [X] tôi đang tìm kiếm, nhưng với chi phí thua được xây dựng trong hỗ trợ cho loại số.

Tôi không thể tìm thấy bất kỳ cách nào để chỉ định trường [X]/Xóa trong số INPUT của Chrome.

Tùy chọn duy nhất tôi có thể nghĩ là ẩn spinner bằng cách sử dụng CSS (tôi nghĩ điều này có thể được thực hiện), và thêm nút của riêng tôi sang bên phải thay vì sử dụng JS để xóa hộp văn bản. Trước khi tôi làm điều này, tự hỏi nếu có một thủ thuật tôi đã bỏ lỡ.

Tùy chọn khác, có vẻ kém hấp dẫn hơn, sẽ chuyển đổi các hộp văn bản của tôi để nhập tìm kiếm, sau đó thêm tất cả số kiểm tra thủ công mã JS bằng tay.

Cảm ơn!

Answer 1

Có vẻ như điều này là không thể với CSS tinh khiết, vì khi bạn kiểm tra bóng dom cho yếu tố đó không có yếu tố như vậy có sẵn. Tuy nhiên bạn luôn có thể sử dụng JS.

Answer 2

này sẽ làm việc trong chrome:

input[type="search"] { 
    -webkit-appearance: searchfield; 
} 
input[type="search"]::-webkit-search-cancel-button { 
    -webkit-appearance: searchfield-cancel-button; 
}