Bisakah saya menyembunyikan spin box input nomor HTML5?


984

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">

2
Bisakah Anda memposting contoh kode yang Anda gunakan? Tangkapan layar juga bagus, jadi kami tahu apa yang Anda lihat. Saya melihat <input type="number" min="4" max="8" />di Chrome dan melihat bidang input khas dengan panah atas dan bawah di samping.
calvinf

77
Anda melihat persis apa yang saya lihat. Saya mencoba untuk menjaga markup type = number untuk memastikan bahwa browser seluler memunculkan keyboard yang sesuai, dan mencegah panah atas dan bawah muncul di browser komputer.
Alan

3
Jika Anda menggunakan nomor masukan, pastikan untuk menggunakan sesuatu yang bermain bagus dengan iOS modern, Android, dan browser Desktop: <input type="number" pattern="[0-9]*" inputmode="numeric">. Info lebih lanjut: stackoverflow.com/a/31619311/806956
Aaron Grey

1
Yang saya sarankan lakukan adalah menulis markup di sepanjang baris <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.
Agi Hammerthief

Jawaban:


1141

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)):

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}
<input type="number" step="0.01" />

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":

Inspektur untuk tipe input = angka (Chrome)


23
Tampaknya Chrome tidak lagi memiliki masalah, jadi Anda hanya dapat menggunakan display: none;sebagai satu-satunya di dalam pemilih
philfreo

9
Sayangnya ini bukan cross-browser, jadi saya sarankan untuk tidak menggunakan type=numberjika 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.
mgol

Saya perlu menggunakan max=dan min=atribut pada <input>solusi sehingga alternatif seperti type="text"tidak HTML5 yang valid. Orang juga menyebut Opera termasuk pemintal ini. Apakah ada solusi untuk Opera yang mirip dengan Safari / Chrome?
unode

2
sebagai catatan, Chrome juga memiliki input::-webkit-clear-buttontombol X
aldo.roman.nurena

2
Pada 2019, ini tidak berfungsi untuk saya di Firefox. Solusi ini berhasil untuk saya: stackoverflow.com/questions/45396280/…
lwitzel

431

Firefox 29 saat ini menambahkan dukungan untuk elemen angka, jadi inilah cuplikan untuk menyembunyikan pemintal di browser berbasis webkit dan moz:

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

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
<input id="test" type="number">


Itu ditambah 'margin: 0' dari jawaban antonj adalah apa yang saya gunakan
Asfand Qazi

Saya menggunakannya tanpa margin, dan sepertinya ok (Mei 2020).
croraf

359

Jawaban singkat:

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;
}
<input type="number" />

Jawaban yang lebih panjang:

Untuk menambah jawaban yang ada ...

Firefox:

Dalam versi terbaru Firefox, nilai default (agen pengguna) dari -moz-appearanceproperti pada elemen ini number-input. Mengubahnya menjadi nilai textfieldsecara efektif menghilangkan pemintal.

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

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:

input[type="number"] {
    -moz-appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
    -moz-appearance: number-input;
}
<input type="number"/>


Chrome:

Dalam versi Chrome saat ini, nilai default (agen pengguna) -webkit-appearanceproperti pada elemen-elemen ini sudah textfield. Untuk menghapus spinner, nilai -webkit-appearanceproperti perlu diubah ke nonepada kelas ::-webkit-outer-spin-button/ ::-webkit-inner-spin-buttonpseudo (ini -webkit-appearance: inner-spin-buttonsecara default).

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

Ada baiknya menunjukkan yang margin: 0digunakan 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':

input::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button;
    display: inline-block;
    cursor: default;
    flex: 0 0 auto;
    align-self: stretch;
    -webkit-user-select: none;
    opacity: 0;
    pointer-events: none;
    -webkit-user-modify: read-only;
}

14
Saya suka jawaban ini lebih baik karena ini termasuk info firefox yang relevan, yang, ketika mengembangkan sesuatu, perlu dipertimbangkan. hanya jawaban webkit yang mengabaikan mesin peramban lain menyisakan banyak yang diinginkan
RozzA

tambahkan! penting ke firefox solution.LIKE INI ===> input [type = "number"] {-moz-appearance: textfield! important; }
sajad saderi

126

Menurut panduan pengkodean pengalaman pengguna Apple untuk Safari seluler , Anda dapat menggunakan yang berikut ini untuk menampilkan keyboard numerik di browser iPhone:

<input type="text" pattern="[0-9]*" />

Sebuah patternof \d*juga akan bekerja.


5
Meskipun demikian, solusi yang diperiksa bekerja sangat baik untuk masalah yang diberikan, saya memutuskan untuk beralih ke solusi ini, di sini. Salah satu alasannya adalah, misalnya browser Opera juga memperlihatkan panah, yang juga harus Anda hindari. Kedua, saya mengamati masalah yang lebih besar di Chrome 17. Di sana, di satu sisi, atribut 'maxlen' tampaknya tidak berfungsi lagi; Anda dapat memasukkan karakter sebanyak yang Anda suka di sana. Di sisi lain, angka yang melebihi panjang tertentu dibulatkan. Menggunakan solusi ini untuk "hanya membuka numpad pada perangkat iOS" tampaknya lebih aman bagi saya.
Jan

Saya pergi dengan solusi ini juga, karena saya punya beberapa JS yang memformat angka di inputfield ketika saya mengetik dan itu tidak bekerja dengan bidang angka. Jadi yang ini bekerja seperti pesona.
Tokimon

19
Ini saat ini tidak melakukan apa pun di Android, di semua browser. Diuji pada halaman pengujian ini di Browser 4.2.2, Chrome 28, dan Firefox 23 di Android 4.2. Browser-browser itu hanya menampilkan keyboard teks standar dengan markup ini.
Rory O'Kane

3
Inilah solusi yang bagus untuk Android dan iOS: stackoverflow.com/a/31619311/806956
Aaron Grey

1
@ Harunray kembali ke titik awal: solusi itu memiliki pemintal untuk desktop.
StrangeWill

39

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.


17
Solusi ini saat ini tidak melakukan validasi di browser apa pun seperti yang type=numberdilakukan.
Pepijn

5
Keyboard telepon tidak sebagus keyboard angka , meskipun jauh lebih baik daripada keyboard teks . Keyboard telepon memiliki huruf dan simbol yang tidak relevan yang dihilangkan dari keyboard angka. (Diuji dengan halaman ini pada Android 4.2.)
Rory O'Kane

16
tidak ada "." di keyboard tel:: <
gion_13

1
@ RoryO'Kane Keyboard angka memiliki kerugian yang sangat besar sehingga akan menolak input apa pun yang tidak benar-benar angka.
Jochem Kuijpers

4
Ini bukan solusi, dan menurut standar HTML5 itu bodoh. input [tel] untuk nomor telepon, input [nomor] untuk nomor umum, termasuk yang floating point. Jadi ini bukan solusi sama sekali.
Vasil Popov

17

Hanya tambahkan css ini untuk menghapus spinner pada input angka

/* For Firefox */

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



/* Webkit browsers like Safari and Chrome */

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

menurut caniuse input[type=number]{ -webkit-appearance }harus mencukupi untuk chrome, tetapi tentu saja Anda perlu juga memodifikasi elemen-pseudo. tahu kenapa ??
oldboy

8

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:

<input type="number">
  <div id="text-field-container" pseudo="-webkit-textfield-decoration-container">
    <div id="editing-view-port">
      <div id="inner-editor"></div>
    </div>
    <div pseudo="-webkit-inner-spin-button" id="spin"></div>
  </div>
</input>

bayangan DOM input [type = "number"

Dan menurut info ini, Anda dapat menyusun beberapa CSS untuk menyembunyikan elemen yang tidak diinginkan, seperti yang dikatakan @Josh.


3

Bukan yang Anda minta, tapi saya melakukan ini karena bug fokus di WebKit dengan spinbox:

// temporary fix for focus bug with webkit input type=number ui
if (navigator.userAgent.indexOf("AppleWebKit") > -1 && navigator.userAgent.indexOf("Mobile") == -1)
{
    var els = document.querySelectorAll("input[type=number]");
    for (var el in els)
        el.type = "text";
}

Mungkin memberi Anda ide untuk membantu dengan apa yang Anda butuhkan.


Ini bukan apa yang saya bicarakan, tetapi karena kurangnya standarisasi HTML5 saat ini, ini adalah solusi terbaik yang disajikan. Menyediakan situs yang berbeda untuk seluler daripada desktop (tidak peduli bagaimana penerapannya) sepertinya satu-satunya cara untuk mencapai hal ini saat ini. Namun saya harus membuat salinan elemen dan mengubah nilai 'type' sebelum menambahkannya ke DOM. Karena IE tidak memungkinkan untuk memodifikasi tipe input begitu elemen telah ditambahkan ke dom.
Alan

3

Ini adalah jawaban yang lebih baik yang ingin saya sarankan pada mouse lebih dan tanpa mouse

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

apa yang margin: 0dicapai? juga, spin-buttonelemen pseudo tampaknya tidak dipicu oleh hoverbrowser yang lebih baru?
oldboy

2

Untuk membuatnya bekerja di Safari, saya menemukan bahwa menambahkan! Penting bagi penyesuaian webkit memaksa tombol putar disembunyikan.

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none !important;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

Saya masih kesulitan mencari solusi untuk Opera juga.


2

Di Firefox untuk Ubuntu, cukup gunakan

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

melakukan trik untukku.

Menambahkan

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

Akan membawaku ke

Pseudo-class atau pseudo-elemen '-webkit-outer-spin-button' tidak dikenal. Ruleset diabaikan karena pemilih yang buruk.

setiap kali saya mencoba. Sama untuk tombol putaran bagian dalam.


1
-webkit-*adalah untuk Chrome, -moz-*untuk mozilla firefox. Itu sebabnya itu tidak berhasil untuk Anda.
Gusstavv Gil

2

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none;
<input id="test" type="number">


6
Jawaban ini sudah diberikan beberapa kali. Ini membantu untuk membaca jawaban yang ada sebelum memberikan yang baru, jika yang baru adalah duplikat.
Dan Dascalescu

1

Mungkin mengubah input angka dengan javascript ke input teks ketika Anda tidak ingin pemintal;

document.getElementById('myinput').type = 'text';

dan hentikan pengguna memasukkan teks;

  document.getElementById('myinput').onkeydown = function(e) {
  if(!((e.keyCode > 95 && e.keyCode < 106)
    || (e.keyCode > 47 && e.keyCode < 58) 
    || e.keyCode == 8
    || e.keyCode == 9)) {
          return false;
      }
  }

kemudian minta javascript mengubahnya kembali jika Anda menginginkan pemintal;

document.getElementById('myinput').type = 'number';

itu bekerja dengan baik untuk tujuan saya


1

Di browser berbasis WebKit dan Blink & Semua Jenis Browser gunakan CSS berikut:

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

Peramban mana yang akan berfungsi karena penggunaan ini 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.
Jason Aller

0

Saya membutuhkan ini untuk bekerja

/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button
  -webkit-appearance: none
  appearance: none
  margin: 0

/* Firefox */
input[type=number]
  -moz-appearance: textfield

Garis tambahan appearance: noneadalah kunci bagi saya.


Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.