Sembunyikan Spinner di Nomor Input

202

Di Firefox 28, saya menggunakan <input type="number">karya hebat karena menampilkan keyboard numerik pada bidang input yang seharusnya hanya berisi angka.

Di Firefox 29, 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 itu tidak berguna ketika Anda perlu menulis sesuatu seperti angka 6 ~ 10 digit.

Apakah mungkin untuk menonaktifkan ini dengan CSS atau jQuery?

— Tidak Ada Junior
sumber

2

Jika Anda tidak ingin panah berputar, maka jangan gunakan type="number". Anda dapat menggunakan type="text"dan patternatribut untuk mengatur regex untuk memastikan itu nomor.

— Rocket Hazmat

4

-webkit-inner-spin-button -webkit-outer-spin-button dengan -webkit-appearance: none; margin: 0; Jangan Bekerja di Firefox.

— NereuJunior

12

@RocketHazmat: type="number"diperlukan untuk browser seluler untuk menampilkan keyboard numerik dan bukan keyboard lengkap.

— CodeManX

3

<input type="tel">itu hanya angka dan tidak termasuk pemintal.

— TomasVeras

5

Mengubah type="text"adalah ide yang buruk karena perangkat sentuh akan menampilkan keyboard yang salah.

— WhyNotHugo

522

Menurut posting blog ini , Anda perlu mengatur -moz-appearance:textfield;di input.

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" step="0.01"/>

Luaskan cuplikan

— Richard Deeming
sumber

1

Saya membungkus ini @-moz-document url-prefix() { ... }dan melakukan apa yang saya inginkan: menyembunyikan pemintal di Firefox, di mana mereka terlihat buruk, tetapi tetap hidup di browser lain, termasuk yang memunculkan keyboard numerik seperti OP disebutkan.

— Michael Scheper

4

Beberapa informasi yang lebih berguna dari Geoff Graham: Input Numerik - Perbandingan Default Peramban

— Richard Deeming

3

ini bekerja dan memang menghapus pemintal, tetapi kemudian Anda sekarang dapat memasukkan karakter alfanumerik ke dalamnya. Semoga seseorang menemukan cara untuk menangani skenario itu tanpa harus memeriksa kunci yang dimasukkan apakah itu angka atau tidak.

— Jovanni G

1

@JovanniG: Bahkan jika Anda tidak menghapus pemintal, Anda masih dapat memasukkan karakter non-numerik ke dalam input di Firefox. Cobalah dengan demo di MDN . Chrome mencegah input non-numerik di kedua contoh.

— Richard Deeming

1

@alxndr: Juga, saya baru saja mencoba "Jalankan cuplikan kode" di Chrome 66, dan berfungsi seperti yang diharapkan.

— Richard Deeming

50

Perlu ditunjukkan bahwa nilai default -moz-appearancepada elemen-elemen ini ada number-inputdi Firefox.

Jika Anda ingin menyembunyikan pemintal secara default, Anda dapat mengatur -moz-appearance: textfieldawalnya, dan jika Anda ingin pemintal muncul pada :hover/ :focus, Anda dapat menimpa penataan sebelumnya -moz-appearance: number-input.

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

<input type="number"/>

Luaskan cuplikan

Saya pikir seseorang mungkin menemukan itu membantu karena saya baru-baru ini harus melakukan ini dalam upaya untuk meningkatkan konsistensi antara Chrome / FF (karena ini adalah cara input nomor berperilaku secara default di Chrome).

Jika Anda ingin melihat semua nilai yang tersedia untuk -moz-appearance, Anda dapat menemukannya di sini (mdn).

— Josh Crozier
sumber

10

Dalam SASS/ SCSSstyle, Anda dapat menulis seperti ini:

input[type='number'] {
  -moz-appearance: textfield;/*For FireFox*/

  &::-webkit-inner-spin-button { /*For Webkits like Chrome and Safari*/
    -webkit-appearance: none;
    margin: 0;
  }
}

Jelas gaya kode ini dapat digunakan di PostCSS.

— Amerika
sumber

7

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


/* for mozilla */  
   input[type=number] {-moz-appearance: textfield;}

— navin prakash
sumber

3

Menghadapi masalah yang sama pasca pembaruan Firefox ke 29.0.1, ini juga tercantum di sini https://bugzilla.mozilla.org/show_bug.cgi?id=947728

Solusi: Mereka (Mozilla guys) telah memperbaikinya dengan memperkenalkan dukungan untuk "-moz-appearance" untuk <input type="number">. Anda hanya perlu memiliki gaya yang dikaitkan dengan bidang input Anda dengan " -moz-appearance:textfield;".

Saya lebih suka cara CSS misalnya: -

.input-mini{
-moz-appearance:textfield;}

Atau

Anda juga dapat melakukannya sebaris:

<input type="number" style="-moz-appearance: textfield">

— Abhijeet
sumber

0

Saya mencampur beberapa jawaban dari jawaban di atas dan dari Cara menghapus panah dari input [type = "number"] di Opera di scss:

input[type=number] {
  &,
  &::-webkit-inner-spin-button,
  &::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: none;

    &:hover,
    &:focus {
      -moz-appearance: number-input;
    }
  }
}

Tested on chrome, firefox, safari

— Berani1991
sumber

0

Ini bekerja untuk saya:

    input[type='number'] {
    appearance: none;
}

Diselesaikan di Firefox, Safari, Chrome. Juga, -moz-appearance: textfield;tidak lagi didukung ( https://developer.mozilla.org/en-US/docs/Web/CSS/appearance )

— Yahel Yechieli
sumber

Sembunyikan Spinner di Nomor Input - Firefox 29