Spinner'ı Giriş Numarasında Gizle

202

Firefox 28'de kullanıyorum <input type="number"> , sadece sayı içermesi gereken giriş alanlarında sayısal klavyeyi getirdiğinden harika çalışıyor.

Firefox 29'da, sayı girişlerini kullanmak, alanımın sağ tarafında, tasarımımda bok gibi görünen döndürme düğmelerini görüntüler. Düğmelere gerçekten ihtiyacım yok, çünkü yine de 6 ~ 10 basamaklı bir sayı gibi bir şey yazmanız gerektiğinde işe yaramazlar.

Bunu CSS veya jQuery ile devre dışı bırakmak mümkün mü?

— NereuJunior
kaynak

2

Döndürme oklarını istemiyorsanız, kullanmayın type="number". Bir sayı olduğundan emin olmak için bir normal ifade ayarlamak için type="text"ve patternözniteliğini kullanabilirsiniz .

— Rocket Hazmat

4

-webkit-iç-spin-düğmesi -webkit-dış-spin-düğmesi ile -webkit-görünüm: yok; kenar boşluğu: 0; Firefox'ta Çalışma.

— NereuJunior

12

@RocketHazmat: type="number"mobil tarayıcıların tam klavye yerine sayısal klavyeyi göstermesi için gereklidir.

— CodeManX

4

<input type="tel">sadece sayılardır ve döndürücüler içermez.

— TomasVeras

5

Değiştirmek type="text"kötü bir fikir çünkü dokunmatik cihazlar yanlış klavyeyi gösterecek.

— WhyNotHugo

523

Göre bu blog yayınına , sette gerek -moz-appearance:textfield;üzerinde 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"/>

Snippet'i genişlet

— Richard Deeming
kaynak

1

Bunu içine sardım @-moz-document url-prefix() { ... }ve istediğim şeyi yapıyor: Firefox'ta kötü görünüyorlar, ancak onları OP'nin belirttiği gibi sayısal klavyeyi getiren tarayıcılar da dahil olmak üzere diğer tarayıcılarda canlı tutuyorlar.

— Michael Scheper

4

Geoff Graham'dan biraz daha yararlı bilgiler: Sayısal Girdiler - Tarayıcı Varsayılanlarının Karşılaştırması

— Richard Deeming

3

bu işe yarar ve gerçekten iplikçikleri kaldırır, ancak artık içine alfasayısal karakterler girebilirsiniz. Umarım birisi girilen anahtarları sayı olup olmadıklarını kontrol etmek zorunda kalmadan bu senaryoyu halletmenin bir yolunu bulur.

— Jovanni G

1

@JovanniG: İplikleri çıkarmasanız bile, Firefox'taki girişe sayısal olmayan karakterler girmeye devam edebilirsiniz. MDN demo ile deneyin . Chrome, her iki örnekte de sayısal olmayan girişleri engeller.

— Richard Deeming

1

@alxndr: Ayrıca, Chrome 66'da "Kod snippet'ini çalıştır" ı denedim ve beklendiği gibi çalışıyor.

— Richard Deeming

50

Bu -moz-appearanceöğelerin varsayılan değerinin number-inputFirefox'ta olduğunu belirtmek gerekir .

Varsayılan olarak değer değişimi gizlemek isterseniz, ayarlayabileceğiniz -moz-appearance: textfieldbaşlangıçta ve eğer istediğiniz spinner görünmesini :hover/ :focus, sen önceki stil üzerine yazabilirsiniz -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"/>

Snippet'i genişlet

Son zamanlarda Chrome / FF arasındaki tutarlılığı artırmak için bunu yapmak zorunda olduğumdan birisinin bunu yararlı bulabileceğini düşündüm (çünkü bu sayı girişlerinin varsayılan olarak Chrome'da davranış şekli budur).

İçin mevcut tüm değerleri görmek -moz-appearanceistiyorsanız, bunları burada bulabilirsiniz (mdn).

— Josh Crozier
kaynak

10

In SASS/ SCSStarzı, böyle yazabilirsiniz:

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

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

Kesinlikle bu kod stili kullanabilirsiniz PostCSS.

— AmerllicA
kaynak

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
kaynak

3

Firefox'un 29.0.1'e güncellemesinden sonra aynı sorunla karşı karşıya, bu da burada listelenir https://bugzilla.mozilla.org/show_bug.cgi?id=947728

Çözümler: Onlar (Mozilla adamları) "-moz-görünüm" için destek vererek bunu düzeltti <input type="number">. Yalnızca giriş alanınızla ilişkili bir stilinizin "-moz-appearance:textfield; " .

CSS yolunu tercih ederim Örn: -

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

Veya

Satır içi de yapabilirsiniz:

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

— Abhijeet
kaynak

0

Yukarıdaki cevaplardan ve SCSS'de Opera'daki okları [type = "number"] girişinden nasıl kaldıracağımdan birkaç cevap karıştırdım :

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

— Darex1991
kaynak

0

Bu benim için çalıştı:

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

Firefox, Safari, Chrome'da çözüldü. Ayrıca, -moz-appearance: textfield;artık desteklenmiyor ( https://developer.mozilla.org/en-US/docs/Web/CSS/appearance )

— Yahel Yechieli
kaynak

Spinner'ı Giriş Numarasında Gizle - Firefox 29