Nonaktifkan tombol putar webkit pada input type = "number"?

203

Saya memiliki situs yang terutama untuk pengguna seluler tetapi juga desktop.

Di Mobile Safari, menggunakan <input type="number">karya hebat karena memunculkan keyboard numerik pada bidang input yang seharusnya hanya berisi angka.

Namun di Chrome dan Safari, menggunakan input angka menampilkan tombol putar di sisi kanan lapangan, yang terlihat seperti omong kosong dalam desain saya. Saya benar-benar tidak memerlukan tombol, karena tidak berguna ketika Anda perlu menulis sesuatu seperti angka 6 digit.

Apakah mungkin untuk menonaktifkan ini dengan -webkit-appearanceatau beberapa trik CSS lainnya? Saya telah mencoba tanpa banyak keberuntungan.

css html webkit pojo
sumber
15
Jika Anda lebih suka menggunakan type="text"untuk alasan lain dan hanya beralih ke nomor untuk fitur keyboard numerik, Anda dapat menggunakan pattern="[0-9]*"untuk mendapatkan fitur keyboard, memungkinkan Anda untuk mempertahankan type="text". Lihat stackoverflow.com/questions/6171903/…
joshuahedlund

Jawaban:

114

Css di bawah ini berfungsi untuk Chrome dan 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;
}
Rolwin Crasta
sumber
8
solusi yang lebih baik daripada di atas (lebih lengkap)
aqm
-moz-appearance: textfield; Selain itu adalah satu-satunya jawaban yang bekerja untuk saya. Terima kasih!
Nanoripper
283

Saya menemukan bahwa ada bagian kedua dari jawaban untuk ini.

Bagian pertama membantu saya, tetapi saya masih memiliki ruang di sebelah kanan type=numberinput saya . Saya telah memusatkan margin pada input, tetapi ternyata saya juga harus memusatkan margin pada pemintal.

Ini memperbaikinya:

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
Bob Spryn
sumber
Luar biasa. Saya memiliki masalah serupa , tetapi dengan strategi CSS yang sedikit berbeda, yang mengarah ke masalah yang sama sekali baru ...
Lukas Eder
1
Adakah yang tahu cara untuk memperbaiki perilaku gulir di mana Anda dapat menggulir ke atas dan ke bawah tanpa batas? Saya telah menetapkan min=0.01(dan maxuntuk beberapa nilai arbitrer) di elemen input saya, tetapi saya lebih suka memiliki scrollwheel hanya naik dan turun halaman. Saya menggunakan AngularJS dan saya tidak dapat menemukan atm.
JaKXz
2
Menautkan kembali ke sumber otoritatif untuk masalah khusus ini dan informasi seperti ini: css-tricks.com/snippets/css/turn-off-number-input-spinners
Josh Habdas
1
untuk menjadi jelas, ini tidak menghapus fungsi gulir mouse!
babalu
1
-moz-appearance: textfield untuk Firefox
Kevin Suttle
16

Tidak yakin apakah ini cara terbaik untuk melakukannya, tetapi ini membuat pemintal menghilang di Chrome 8.0.552.5 dev:

input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
robertc
sumber
@JethroLarson Apa yang tidak berfungsi? Anda bisa coba -webkit-outer-spin-buttonsaja.
robertc
ini bekerja sangat baik untuk type = "date": input [type = date] :: - webkit-outer-spin-button {-webkit-appearance: none; }
uglymunky
11

Tampaknya mustahil untuk mencegah pemintal muncul di Opera. Sebagai solusi sementara, Anda dapat memberikan ruang bagi pemintal. Sejauh yang saya tahu, CSS berikut menambahkan padding yang cukup, hanya di Opera:

noindex:-o-prefocus,
input[type=number] {
    padding-right: 1.2em;
}
Goulven
sumber
4
@ Knu Memang, tetapi perlu disebutkan di sini karena kode dalam jawaban meninggalkan input yang tidak dapat digunakan dengan Opera.
Goulven
4
@ Goulvench tolong jangan :) Saya merasa sangat berguna, orang lain mungkin juga.
frnhr
-2

Anda juga dapat menyembunyikan pemintal dengan trik berikut:

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