HTML5 numarası girişinin döndürme kutusunu gizleyebilir miyim?

Bazı tarayıcıların (Chrome gibi) tür numarasının HTML girişi için oluşturduğu yeni döndürme kutularını gizlemenin tutarlı bir yolu var mı? Yukarı / aşağı okların görünmesini önlemek için bir CSS veya JavaScript yöntemi arıyorum.

<input id="test" type="number">

Bu CSS, webkit tarayıcıları için döndürme düğmesini etkili bir şekilde gizler (Chrome 7.0.517.44 ve Safari Sürüm 5.0.2'de (6533.18.5) test etmiştir):

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

İlgilendiğiniz öğeler için eşleşen CSS özelliklerini aramak için her zaman denetçiyi (webkit, muhtemelen Firebug for Firefox) kullanabilirsiniz, Pseudo öğelerini arayın. Bu görüntü bir girdi öğesi türü = "sayı" için sonuçları gösterir:

Firefox 29 şu anda sayı öğeleri için destek eklediğinden, webkit ve moz tabanlı tarayıcılarda dönenleri gizlemek için bir snippet:

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

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

<input id="test" type="number">

Kısa cevap:

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

Daha uzun cevap:

Mevcut cevaba eklemek için ...

Firefox:

Firefox'un geçerli sürümlerinde , bu öğelerdeki -moz-appearanceözelliğin (kullanıcı aracısı) varsayılan değeri number-input. Bunu değere textfieldçevirmek, döndürücüyü etkili bir şekilde kaldırır.

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

Bazı durumlarda, döndürücünün başlangıçta gizlenmesini ve ardından üzerine gelindiğinde / odakta görünmesini isteyebilirsiniz . (Bu, şu anda Chrome'daki varsayılan davranıştır). Öyleyse, aşağıdakileri kullanabilirsiniz:

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

<input type="number"/>

Krom:

Chrome'un mevcut sürümlerinde , bu öğelerdeki -webkit-appearanceözelliğin (kullanıcı aracısı) varsayılan değeri zaten textfield. Eğiren kaldırmak amacıyla, -webkit-appearancetesisin değeri ihtiyaçları için değiştirilmesi noneüzerine ::-webkit-outer-spin-button/ ::-webkit-inner-spin-buttonsözde sınıfları (o -webkit-appearance: inner-spin-buttonvarsayılan olarak).

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

<input type="number" />

Dikkat It değerinde işaret margin: 0içinde marjını kaldırmak için kullanılır eski Chrome sürümleri.

Şu anda, bunu yazarken, 'iç-spin-düğmesi' sözde sınıfında varsayılan kullanıcı aracısı stili:

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

Apple'ın mobil Safari kullanıcı deneyimi kodlama kılavuzuna göre , iPhone tarayıcısında sayısal bir klavye görüntülemek için aşağıdakileri kullanabilirsiniz:

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

Bir patternait \d*de çalışacaktır.

input type="tel"Bunun yerine kullanmayı deneyin . Sayıları olan bir klavye açar ve döndürme kutuları göstermez. JavaScript veya CSS veya eklenti veya başka bir şey gerektirmez.

Bu css'i yalnızca sayı girişindeki döndürücüyü kaldırmak için ekleyin

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

Bir sorunla karşılaştım input[type="datetime-local"] benzer .

Ve bu tür problemlerin üstesinden gelmenin bir yolunu buldum.

İlk olarak, "DevTools -> Ayarlar -> Genel -> Öğeler -> Kullanıcı aracısı gölge DOM'sini göster" ile kromun gölge kök özelliğini açmalısınız.

Ardından tüm gölgeli DOM öğelerini görebilirsiniz , örneğin, <input type="number">gölgeli DOM içeren tam öğe:

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

Ve bu bilgilere göre, @Josh'un dediği gibi, istenmeyen öğeleri gizlemek için bazı CSS'ler hazırlayabilirsiniz.

Ne istedi değil, ama bunu WebKit spinboxes ile bir odak hata nedeniyle yapıyorum:

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

İhtiyacınız olan şeylere yardımcı olmak için size bir fikir verebilir.

Bu fare üzerinde ve fare üzerinde olmadan önermek istiyorum daha iyi cevaptır

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

Safari'de bu çalışmayı yapmak için webkit ayarlaması için!

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

Hala Opera için bir çözüm bulmakta zorlanıyorum.

Ubuntu için Firefox'ta,

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

benim için hile yaptı.

Ekleme

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

Beni götürürdü

Bilinmeyen sözde sınıf veya sözde öğe '-webkit-dış-spin-düğmesi'. Kötü seçici nedeniyle kural kümesi yoksayıldı.

her denediğimde. İçteki sıkma düğmesi için de aynıdır.

Bir spinner istemiyorsanız javascript ile sayı girişini metin girişine çevirebilirsiniz;

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

ve kullanıcının metin girmesini durdurur;

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

sonra bir spinner istiyorsanız javascript'i değiştirmesini sağlayın;

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

amacım için iyi çalıştı

WebKit ve Blink tabanlı tarayıcılarda ve Her Türlü Tarayıcıda aşağıdaki CSS kullanılır:

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

Çalışmak için buna ihtiyacım vardı

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

Ekstra satır appearance: nonebenim için önemliydi.

Kullanarak süper basit bir çözüm buldum

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

Bu, çoğu tarayıcıda desteklenir: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode