Wyłączyć przyciski wirowania w zestawie na typie wprowadzania = „liczba”?

203

Mam witrynę przeznaczoną przede wszystkim dla użytkowników mobilnych, ale także komputerów stacjonarnych.

W Mobile Safari korzystanie z nich <input type="number">działa świetnie, ponieważ wyświetla klawiaturę numeryczną w polach wprowadzania, które powinny zawierać tylko cyfry.

Jednak w Chrome i Safari użycie wprowadzania liczb powoduje wyświetlenie przycisków spinania po prawej stronie pola, które w moim projekcie wyglądają jak badziewia. Naprawdę nie potrzebuję przycisków, ponieważ są one bezużyteczne, gdy i tak musisz napisać coś w rodzaju liczby 6-cyfrowej.

Czy można to wyłączyć za pomocą -webkit-appearanceinnej sztuczki CSS? Próbowałem bez większego szczęścia.

css html webkit pojo
źródło
15
Jeśli wolisz używać type="text"z innych powodów, a dla funkcji klawiatury numerycznej zmieniłeś tylko na numer, możesz użyć pattern="[0-9]*"tej funkcji, aby zachować tę funkcję type="text". Zobacz stackoverflow.com/questions/6171903/…
joshuahedlund

Odpowiedzi:

114

Poniższy css działa zarówno w przeglądarce Chrome, jak i Firefox

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;
}
Rolwin Crasta
źródło
8
lepsze rozwiązanie niż wyżej (bardziej kompletne)
aqm
-moz-wygląd: pole tekstowe; dodanie było jedyną odpowiedzią, która działała dla mnie. Dzięki!
Nanoripper
283

Odkryłem, że jest druga część odpowiedzi na to pytanie.

Pierwsza część pomogła mi, ale nadal miałem spację po prawej stronie moich type=numberdanych. Wyzerowałem margines na wejściu, ale najwyraźniej musiałem również wyzerować margines na pokrętle.

To naprawiło:

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
Bob Spryn
źródło
Niesamowite. Miałem podobny problem , ale z nieco inną strategią CSS, co doprowadziło do zupełnie nowych problemów ...
Lukas Eder
1
Czy ktoś zna sposób na poprawienie zachowania przewijania, w którym można przewijać w górę iw dół w nieskończoność? Ustawiłem min=0.01(i maxjakąś dowolną wartość) w moim elemencie wejściowym, ale wolę, aby kółko przewijania przesuwało się w górę i w dół strony. Korzystam z AngularJS i nie mogę znaleźć bankomatu.
JaKXz
2
Odsyłacz do wiarygodnego źródła tego konkretnego problemu i tego rodzaju informacji: css-tricks.com/snippets/css/turn-off-number-input-spinners
Josh Habdas
1
dla jasności, nie usuwa to funkcji przewijania myszy!
babalu
1
-moz-wygląd: pole tekstowe dla przeglądarki Firefox
Kevin Suttle
16

Nie jestem pewien, czy jest to najlepszy sposób, ale powoduje to, że błystki znikają w Chrome 8.0.552.5 dev:

input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
robertc
źródło
@JethroLarson Na czym to nie działa? Możesz -webkit-outer-spin-buttonzamiast tego spróbować .
robertc,
działało to doskonale dla type = "date": input [type = date] :: - webkit-outer-spin-button {-webkit-wygląd: brak; }
brzydki
11

Wydaje się niemożliwe, aby zapobiec pojawieniu się błystek w Operze. Jako tymczasowe obejście możesz zrobić miejsce dla błystek. O ile wiem, następujący CSS dodaje tylko dopełnienie, tylko w Operze:

noindex:-o-prefocus,
input[type=number] {
    padding-right: 1.2em;
}
Goulven
źródło
4
@Knu Rzeczywiście, ale warto o tym wspomnieć, ponieważ kod w odpowiedzi pozostawia dane wejściowe bezużyteczne w Operze.
Goulven
4
@Goulvench proszę nie :) Znalazłem to bardzo przydatne, może też ktoś inny.
frnhr
-2

Możesz także ukryć pokrętło za pomocą następującej sztuczki:

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  opacity:0;
  pointer-events:none;
}
Sébastien Varinois
źródło