Ukryj pokrętło w numerze wejściowym

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?

— 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

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

0

To działało dla mnie:

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

Rozwiązany w Firefox, Safari, Chrome. Ponadto -moz-appearance: textfield;nie jest już obsługiwany ( https://developer.mozilla.org/en-US/docs/Web/CSS/appearance )

— Yahel Yechieli
źródło

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