Saya bisa menyembunyikan HTML5 jumlah input spin box?

CSS ini efektif menyembunyikan spin-tombol untuk browser webkit (telah diuji 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; 

Firefox 29 ini menambahkan dukungan untuk jumlah elemen, jadi di sini's cuplikan untuk menyembunyikan pemintal di webkit dan moz berbasis browser:

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

Untuk menambahkan ke yang sudah ada jawabannya...

Firefox:

Dalam versi terbaru dari Firefox, (user agent) nilai default dari -moz-penampilan property pada elemen-elemen ini adalah nomor-input. Mengubah bahwa untuk nilai textfield efektif menghilangkan spinner.

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

Dalam beberapa kasus, anda mungkin ingin spinner yang akan disembunyikan awalnya, dan kemudian muncul di hover/fokus. (Ini saat ini adalah perilaku default di Chrome). Jika demikian, anda dapat menggunakan berikut:

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

<input type="number"/>

Chrome:

Di versi terbaru Chrome, (user agent) nilai default dari -webkit-penampilan property pada elemen-elemen ini sudah textfield. Dalam rangka untuk menghapus spinner, - webkit-penampilan property's nilai yang perlu diubah ke none pada ::-webkit-luar-spin-tombol/::-webkit-inner-spin-tombol pseudo-class (itu adalah -webkit-penampilan: batin-spin-tombol secara default).

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

<input type="number" />

It's worth menunjukkan bahwa margin: 0 digunakan untuk menghapus margin tua versi Chrome.

Saat ini, saat tulisan ini, berikut ini adalah default user agent styling pada 'batin-spin-tombol' pseudo class:

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 Apple pengalaman pengguna coding panduan untuk mobile Safari, anda dapat menggunakan berikut untuk menampilkan keyboard numerik di iPhone browser:

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

Sebuah pola dari \d* juga akan bekerja.

Mencoba menggunakan input type="tel" sebagai gantinya. Itu muncul keyboard dengan angka-angka, dan itu tidak menunjukkan spin kotak. Hal ini tidak memerlukan JavaScript atau CSS atau plugin atau apa pun.

Hanya menambahkan css ini untuk menghapus spinner di masukan nomor

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

I've mengalami masalah ini dengan input[type="datetime-lokal"], yang mirip dengan masalah ini.

Dan saya've menemukan cara untuk mengatasi masalah seperti ini.

Pertama, anda harus mengaktifkan chrome's shadow-root fitur "DevTools -> Pengaturan -> Umum -> Unsur -> Menunjukkan user agent bayangan DOM"

Kemudian anda dapat melihat semua dibayangi elemen DOM, misalnya, untuk <input type="nomor">, penuh dengan elemen dibayangi DOM 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>

Bukan apa yang anda minta, tapi aku melakukan ini karena fokus bug di WebKit dengan spinboxes:

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

Ini akan memberikan anda ide untuk membantu dengan apa yang anda butuhkan.

Ini lebih baik jawaban yang saya ingin menyarankan pada mouse 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 membuat ini bekerja di Safari saya menemukan menambahkan !penting untuk webkit penyesuaian pasukan tombol spin untuk disembunyikan.

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; 

Pada Firefox untuk Ubuntu, hanya menggunakan

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

melakukan trik untuk saya.

Menambahkan

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

Akan membawa saya ke

tidak Diketahui pseudo-kelas atau pseudo-element '-webkit-luar-spin-tombol'. Ruleset diabaikan karena pemilih.

setiap kali saya mencoba. Yang sama untuk bagian dalam tombol spin.

Mungkin perubahan jumlah input dengan javascript untuk input teks saat anda don't ingin spinner;

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

dan menghentikan 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 memiliki javascript mengubahnya kembali dalam kasus anda ingin spinner;

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

itu bekerja dengan baik untuk tujuan saya

anda dapat menggunakan kode sederhana di file CSS:

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