Apakah ada cara yang konsisten di browser untuk menyembunyikan spin box baru yang dirender oleh beberapa browser (seperti Chrome) untuk input HTML dari nomor jenis? Saya mencari metode CSS atau JavaScript untuk mencegah panah naik / turun muncul.
<input id="test" type="number">
<input type="number" min="4" max="8" />
di Chrome dan melihat bidang input khas dengan panah atas dan bawah di samping.<input type="number" pattern="[0-9]*" inputmode="numeric">
. Info lebih lanjut: stackoverflow.com/a/31619311/806956<input type="text" placeholder="number (digits only)" pattern="[0-9]+" class="validate number-validation" ... >
dan menggunakan jQuery Validati atau serupa untuk menangani validasi. Saya belum menguji pendekatan ini, itulah sebabnya ini adalah komentar, bukan jawaban.Jawaban:
CSS ini secara efektif menyembunyikan tombol putar untuk browser webkit (telah mengujinya di Chrome 7.0.517.44 dan Safari Versi 5.0.2 (6533.18.5)):
Anda selalu dapat menggunakan inspektur (webkit, mungkin Firebug untuk Firefox) untuk mencari properti CSS yang cocok untuk elemen yang Anda minati, mencari elemen Pseudo. Gambar ini menunjukkan hasil untuk elemen input type = "number":
sumber
display: none;
sebagai satu-satunya di dalam pemilihtype=number
jika Anda harus menyembunyikan panah ini. Misalnya saat ini mereka masih akan ditampilkan di Opera dan mereka akan mulai ditampilkan di Firefox, IE dll ketika mereka menerapkan jenis input ini.max=
danmin=
atribut pada<input>
solusi sehingga alternatif sepertitype="text"
tidak HTML5 yang valid. Orang juga menyebut Opera termasuk pemintal ini. Apakah ada solusi untuk Opera yang mirip dengan Safari / Chrome?input::-webkit-clear-button
tombol XFirefox 29 saat ini menambahkan dukungan untuk elemen angka, jadi inilah cuplikan untuk menyembunyikan pemintal di browser berbasis webkit dan moz:
sumber
Jawaban singkat:
Jawaban yang lebih panjang:
Untuk menambah jawaban yang ada ...
Firefox:
Dalam versi terbaru Firefox, nilai default (agen pengguna) dari
-moz-appearance
properti pada elemen ininumber-input
. Mengubahnya menjadi nilaitextfield
secara efektif menghilangkan pemintal.Dalam beberapa kasus, Anda mungkin ingin pemintal disembunyikan pada awalnya , dan kemudian muncul di hover / fokus. (Saat ini merupakan perilaku default di Chrome). Jika demikian, Anda dapat menggunakan yang berikut ini:
Chrome:
Dalam versi Chrome saat ini, nilai default (agen pengguna)
-webkit-appearance
properti pada elemen-elemen ini sudahtextfield
. Untuk menghapus spinner, nilai-webkit-appearance
properti perlu diubah kenone
pada kelas::-webkit-outer-spin-button
/::-webkit-inner-spin-button
pseudo (ini-webkit-appearance: inner-spin-button
secara default).Ada baiknya menunjukkan yang
margin: 0
digunakan untuk menghapus margin di yang lebih tua versi Chrome yang .Saat ini, saat menulis ini, berikut adalah gaya agen pengguna default pada kelas semu 'tombol putar-dalam':
sumber
Menurut panduan pengkodean pengalaman pengguna Apple untuk Safari seluler , Anda dapat menggunakan yang berikut ini untuk menampilkan keyboard numerik di browser iPhone:
Sebuah
pattern
of\d*
juga akan bekerja.sumber
Coba gunakan
input type="tel"
sebagai gantinya. Itu muncul keyboard dengan angka, dan itu tidak menunjukkan kotak spin. Tidak memerlukan JavaScript atau CSS atau plugin atau apa pun.sumber
type=number
dilakukan.Hanya tambahkan css ini untuk menghapus spinner pada input angka
sumber
input[type=number]{ -webkit-appearance }
harus mencukupi untuk chrome, tetapi tentu saja Anda perlu juga memodifikasi elemen-pseudo. tahu kenapa ??Saya mengalami masalah ini dengan a
input[type="datetime-local"]
, yang mirip dengan masalah ini.Dan saya telah menemukan cara untuk mengatasi masalah semacam ini.
Pertama, Anda harus mengaktifkan fitur root-root chrome oleh "DevTools -> Pengaturan -> Umum -> Elemen -> Tampilkan bayangan agen pengguna DOM"
Kemudian Anda dapat melihat semua elemen DOM yang dibayangi , misalnya, untuk
<input type="number">
, elemen penuh dengan DOM yang dibayangi adalah:Dan menurut info ini, Anda dapat menyusun beberapa CSS untuk menyembunyikan elemen yang tidak diinginkan, seperti yang dikatakan @Josh.
sumber
Bukan yang Anda minta, tapi saya melakukan ini karena bug fokus di WebKit dengan spinbox:
Mungkin memberi Anda ide untuk membantu dengan apa yang Anda butuhkan.
sumber
Ini adalah jawaban yang lebih baik yang ingin saya sarankan pada mouse lebih dan tanpa mouse
sumber
margin: 0
dicapai? juga,spin-button
elemen pseudo tampaknya tidak dipicu olehhover
browser yang lebih baru?Untuk membuatnya bekerja di Safari, saya menemukan bahwa menambahkan! Penting bagi penyesuaian webkit memaksa tombol putar disembunyikan.
Saya masih kesulitan mencari solusi untuk Opera juga.
sumber
Di Firefox untuk Ubuntu, cukup gunakan
melakukan trik untukku.
Menambahkan
Akan membawaku ke
setiap kali saya mencoba. Sama untuk tombol putaran bagian dalam.
sumber
-webkit-*
adalah untuk Chrome,-moz-*
untuk mozilla firefox. Itu sebabnya itu tidak berhasil untuk Anda.sumber
Mungkin mengubah input angka dengan javascript ke input teks ketika Anda tidak ingin pemintal;
dan hentikan pengguna memasukkan teks;
kemudian minta javascript mengubahnya kembali jika Anda menginginkan pemintal;
itu bekerja dengan baik untuk tujuan saya
sumber
Di browser berbasis WebKit dan Blink & Semua Jenis Browser gunakan CSS berikut:
sumber
webkit
? Ketika menjawab pertanyaan berusia sembilan tahun dengan empat belas jawaban yang ada, penting untuk menambahkan penjelasan tentang bagaimana dan mengapa jawaban Anda bekerja dan menyebutkan aspek baru dari pertanyaan yang dijawabnya.Saya membutuhkan ini untuk bekerja
Garis tambahan
appearance: none
adalah kunci bagi saya.sumber
Saya menemukan solusi super sederhana menggunakan
Ini didukung sebagian besar browser: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
sumber