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

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