Bisakah saya menyembunyikan spin box input nomor HTML5?

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

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

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

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;
}

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.

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.

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;
}

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>

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

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 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; }

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.

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.

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

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; 
}

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.

Saya menemukan solusi super sederhana menggunakan

<input type="text" inputmode="numeric" />

Ini didukung sebagian besar browser: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode