Vô hiệu hóa các nút quay của bộ webkit trên loại đầu vào = Số thứ tự?

Tôi có một trang web chủ yếu dành cho người dùng di động nhưng máy tính để bàn cũng vậy.

Trên Mobile Safari, việc sử dụng <input type="number">hoạt động rất tốt vì nó hiển thị bàn phím số trên các trường nhập chỉ chứa số.

Tuy nhiên, trong Chrome và Safari, sử dụng đầu vào số sẽ hiển thị các nút xoay ở bên phải của trường, trông giống như tào lao trong thiết kế của tôi. Tôi thực sự không cần các nút, bởi vì chúng vô dụng khi bạn cần viết một cái gì đó giống như một số có 6 chữ số.

Có thể vô hiệu hóa điều này với -webkit-appearancehoặc một số thủ thuật CSS khác không? Tôi đã thử mà không gặp nhiều may mắn.

Css dưới đây hoạt động cho cả Chrome và Firefox

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield;
}

Tôi phát hiện ra rằng có một phần thứ hai của câu trả lời cho điều này.

Phần đầu tiên đã giúp tôi, nhưng tôi vẫn có một khoảng trống ở bên phải type=numberđầu vào của tôi . Tôi đã loại bỏ lề trên đầu vào, nhưng rõ ràng tôi cũng phải loại bỏ lề trên spinner.

Điều này đã sửa nó:

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

Không chắc đây có phải là cách tốt nhất để làm hay không, nhưng điều này làm cho các spinners biến mất trên Chrome 8.0.552.5 dev:

input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

Dường như không thể ngăn chặn các spinners xuất hiện trong Opera. Như một cách giải quyết tạm thời, bạn có thể nhường chỗ cho các spinners. Theo như tôi có thể nói, CSS sau đây chỉ thêm phần đệm, chỉ trong Opera:

noindex:-o-prefocus,
input[type=number] {
    padding-right: 1.2em;
}

Bạn cũng có thể ẩn spinner bằng thủ thuật sau:

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  opacity:0;
  pointer-events:none;
}