Ukryj pokrętło w numerze wejściowym - Firefox 29

202

W przeglądarce Firefox 28 używam <input type="number">działa świetnie, ponieważ wyświetla klawiaturę numeryczną w polach wprowadzania, które powinny zawierać tylko cyfry.

W przeglądarce Firefox 29 za pomocą wprowadzania liczb wyświetla się przyciski spinania po prawej stronie pola, które w moim projekcie wyglądają jak bzdury. Naprawdę nie potrzebuję przycisków, ponieważ są one bezużyteczne, gdy i tak musisz napisać coś w rodzaju 6 ~ 10 cyfr.

Czy można to wyłączyć za pomocą CSS lub jQuery?

jquery css firefox input spinner NereuJunior
źródło
2
Jeśli nie chcesz strzałek wirujących, nie używaj type="number". Możesz użyć type="text"i patternatrybutu, aby ustawić wyrażenie regularne, aby upewnić się, że jest liczbą.
Rocket Hazmat
4
-webkit-wewnętrzny-przycisk-spin -webkit-zewnętrzny-przycisk-spin z wyglądem -webkit: brak; margines: 0; Nie działa w przeglądarce Firefox.
NereuJunior
12
@RocketHazmat: type="number"jest wymagane, aby przeglądarki mobilne wyświetlały klawiaturę numeryczną zamiast pełnej klawiatury.
CodeManX
3
<input type="tel">to tylko liczby i nie obejmuje błystek.
TomasVeras
5
Zmiana type="text"jest złym pomysłem, ponieważ urządzenia dotykowe pokażą niewłaściwą klawiaturę.
WhyNotHugo

Odpowiedzi:

522

Zgodnie z tym postem na blogu musisz ustawić -moz-appearance:textfield;na 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"/>
Rozwiń fragment kodu

Richard Deeming
źródło
1
Założyłem to @-moz-document url-prefix() { ... }i robi to, co chcę: ukrywa błystki w Firefoksie, gdzie wyglądają źle, ale utrzymują je przy życiu w innych przeglądarkach, w tym tych, które wyświetlają klawiaturę numeryczną, jak wspomniano PO.
Michael Scheper,
4
Kilka bardziej przydatnych informacji z Geoffa Grahama: Wprowadzanie liczbowe - Porównanie ustawień domyślnych przeglądarki
Richard Deeming
3
to działa i faktycznie usuwa pokrętła, ale wtedy możesz teraz wprowadzać do niego znaki alfanumeryczne. Mam nadzieję, że ktoś znajdzie sposób na poradzenie sobie z tym scenariuszem bez konieczności sprawdzania wprowadzonych kluczy, jeśli są to cyfry lub nie.
Jovanni G
1
@JovanniG: Nawet jeśli nie usuniesz błystek, nadal możesz wprowadzać znaki nienumeryczne do danych wejściowych w przeglądarce Firefox. Wypróbuj w wersji demonstracyjnej na MDN . Chrome w obu przykładach zapobiega wprowadzaniu danych nienumerycznych.
Richard Deeming
1
@alxndr: Ponadto właśnie wypróbowałem „Uruchom fragment kodu” w Chrome 66 i działa on zgodnie z oczekiwaniami.
Richard Deeming,
50

Warto zauważyć, że domyślną wartością -moz-appearancetych elementów jest number-inputFirefox.

Jeśli chcesz ukryć domyślnie przędzarkę, możesz ustawić ją -moz-appearance: textfieldpoczątkowo, a jeśli chcesz, aby przędzarka pojawiła się na :hover/ :focus, możesz zastąpić poprzednią stylizację -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"/>
Rozwiń fragment kodu

Pomyślałem, że ktoś może uznać to za pomocne, ponieważ ostatnio musiałem to zrobić, próbując poprawić spójność między Chrome / FF (ponieważ jest to domyślny sposób, w jaki dane liczbowe zachowują się domyślnie w Chrome).

Jeśli chcesz zobaczyć wszystkie dostępne wartości -moz-appearance, możesz je znaleźć tutaj (mdn).

Josh Crozier
źródło
11

W SASS/ SCSSstyle możesz pisać w następujący sposób:

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

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

Zdecydowanie można użyć tego stylu kodu PostCSS.

AmerllicA
źródło
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
źródło
powyżej kodu css wystarczy, aby ukryć html <input type = "number"> pokrętło
navin prakash
3

W obliczu tego samego problemu po aktualizacji Firefox do 29.0.1, jest to również wymienione tutaj https://bugzilla.mozilla.org/show_bug.cgi?id=947728

Rozwiązania: Oni (chłopaki z Mozilli) naprawili to, wprowadzając obsługę „-moz-wygląd” dla <input type="number">. Musisz tylko mieć styl powiązany z polem wejściowym za pomocą „ -moz-appearance:textfield;”.

Wolę sposób CSS Np .: -

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

Lub

Możesz to zrobić również w linii:

<input type="number" style="-moz-appearance: textfield">
Abhijeet
źródło
0

Wymieszałem kilka odpowiedzi z powyższych odpowiedzi i z Jak usunąć strzałki z wejścia [type = "number"] w Operze w 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
Darex1991
źródło