Czy mogę ukryć pole spinania wprowadzania liczb HTML5?

Czy istnieje spójny sposób w różnych przeglądarkach, aby ukryć nowe pola spinów, które niektóre przeglądarki (takie jak Chrome) renderują dla wprowadzania HTML typu numer? Szukam metody CSS lub JavaScript, aby zapobiec pojawianiu się strzałek w górę / w dół.

<input id="test" type="number">

Ten CSS skutecznie ukrywa przycisk spinania w przeglądarkach webkit (przetestowałem go w Chrome 7.0.517.44 i Safari w wersji 5.0.2 (6533.18.5)):

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}

<input type="number" step="0.01" />

Zawsze możesz użyć inspektora (webkit, ewentualnie Firebug dla Firefoksa), aby wyszukać dopasowane właściwości CSS dla elementów, które Cię interesują, poszukać Pseudo-elementów. Ten obraz pokazuje wyniki dla typu elementu wejściowego = „liczba”:

Firefox 29 obecnie dodaje obsługę elementów liczbowych, więc oto fragment służący do ukrywania błystek w przeglądarkach internetowych i Moz:

input[type='number'] {
    -moz-appearance:textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

<input id="test" type="number">

Krótka odpowiedź:

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" />

Dłuższa odpowiedź:

Aby dodać do istniejącej odpowiedzi ...

Firefox:

W bieżących wersjach Firefoksa wartością domyślną (dla agenta użytkownika) -moz-appearancewłaściwości tych elementów jest number-input. Zmiana tego na wartość textfieldskutecznie usuwa błystkę.

input[type="number"] {
    -moz-appearance: textfield;
}

W niektórych przypadkach możesz chcieć początkowo ukryć pokrętło , a następnie wyświetlić je po najechaniu myszą / skupieniu. (Jest to obecnie domyślne zachowanie w Chrome). Jeśli tak, możesz użyć następujących opcji:

input[type="number"] {
    -moz-appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
    -moz-appearance: number-input;
}

<input type="number"/>

Chrom:

W obecnych wersjach Chrome, wartość domyślna (user agent) z -webkit-appearancenieruchomości na tych elementów jest już textfield. W celu usunięcia z tarczy, na -webkit-appearancepotrzeby wartości nieruchomości, który ma być zmieniony nonena ::-webkit-outer-spin-button/ ::-webkit-inner-spin-buttonklas pseudo (jest -webkit-appearance: inner-spin-buttondomyślnie).

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

<input type="number" />

Warto zauważyć, że margin: 0w starszych usuwa się margines wersjach Chrome.

Obecnie, w chwili pisania tego tekstu, tutaj jest domyślna stylizacja agenta użytkownika w pseudoklasie „przycisk wewnętrzny spin”:

input::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button;
    display: inline-block;
    cursor: default;
    flex: 0 0 auto;
    align-self: stretch;
    -webkit-user-select: none;
    opacity: 0;
    pointer-events: none;
    -webkit-user-modify: read-only;
}

Według podręcznikiem użytkownika Apple dotyczącym kodowania dla mobilnego Safari , możesz użyć następujących opcji, aby wyświetlić klawiaturę numeryczną w przeglądarce iPhone'a:

<input type="text" pattern="[0-9]*" />

patternZ \d*będzie również działać.

Spróbuj użyć input type="tel"zamiast tego. Wyskakuje klawiatura z cyframi i nie wyświetla ramek. Nie wymaga JavaScript, CSS, wtyczek ani niczego innego.

Dodaj tylko ten css, aby usunąć pokrętło po wprowadzeniu liczby

/* For Firefox */

input[type='number'] {
    -moz-appearance:textfield;
}



/* Webkit browsers like Safari and Chrome */

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

Spotkałem ten problem z input[type="datetime-local"] , który jest podobny do tego problemu.

I znalazłem sposób na rozwiązanie tego rodzaju problemów.

Najpierw musisz włączyć funkcję chrome-root-shadow w „DevTools -> Ustawienia -> Ogólne -> Elementy -> Pokaż cień DOM agenta użytkownika”

Następnie możesz zobaczyć wszystkie cieńowane elementy DOM , na przykład, <input type="number">pełny element z zaciemnionym DOM to:

<input type="number">
  <div id="text-field-container" pseudo="-webkit-textfield-decoration-container">
    <div id="editing-view-port">
      <div id="inner-editor"></div>
    </div>
    <div pseudo="-webkit-inner-spin-button" id="spin"></div>
  </div>
</input>

Zgodnie z tymi informacjami możesz napisać CSS, aby ukryć niechciane elementy, tak jak powiedział @Josh.

Nie to, o co prosiłeś, ale robię to z powodu błędu skupienia w WebKit ze spinboxami:

// temporary fix for focus bug with webkit input type=number ui
if (navigator.userAgent.indexOf("AppleWebKit") > -1 && navigator.userAgent.indexOf("Mobile") == -1)
{
    var els = document.querySelectorAll("input[type=number]");
    for (var el in els)
        el.type = "text";
}

To może dać ci pomysł na pomoc w tym, czego potrzebujesz.

To jest lepsza odpowiedź, którą chciałbym zasugerować po najechaniu myszą i bez myszy

input[type='number'] {
  appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button,
input[type='number']:hover::-webkit-inner-spin-button, 
input[type='number']:hover::-webkit-outer-spin-button {
-webkit-appearance: none; 
 margin: 0; }

Aby ta funkcja działała w przeglądarce Safari, dodawanie! Ważne w dostosowaniu pakietu internetowego wymusza ukrywanie przycisku obracania.

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none !important;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

Nadal mam problemy z wypracowaniem rozwiązania dla Opery.

W przeglądarce Firefox dla Ubuntu, tylko za pomocą

    input[type='number'] {
    -moz-appearance:textfield;
}

zrobił dla mnie lewę.

Dodawanie

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

Doprowadziłby mnie do

Nieznany pseudo-klasa lub pseudoelement „-webkit-outer-spin-button”. Zestaw reguł został zignorowany z powodu złego wyboru.

za każdym razem, gdy próbowałem. To samo dotyczy wewnętrznego przycisku wirowania.

Może zmień wprowadzanie liczb za pomocą javascript na wprowadzanie tekstu, jeśli nie chcesz pokrętła;

document.getElementById('myinput').type = 'text';

i powstrzymaj użytkownika od wprowadzania tekstu;

  document.getElementById('myinput').onkeydown = function(e) {
  if(!((e.keyCode > 95 && e.keyCode < 106)
    || (e.keyCode > 47 && e.keyCode < 58) 
    || e.keyCode == 8
    || e.keyCode == 9)) {
          return false;
      }
  }

poproś javascript, aby zmienił go z powrotem, na wypadek gdybyś potrzebował tarczy;

document.getElementById('myinput').type = 'number';

działało dobrze dla moich celów

W przeglądarkach WebKit i Blink oraz wszelkiego rodzaju przeglądarkach użyj następującego CSS:

/* Disable Number Arrow */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

Potrzebowałem tego do pracy

/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button
  -webkit-appearance: none
  appearance: none
  margin: 0

/* Firefox */
input[type=number]
  -moz-appearance: textfield

Dodatkowa linia appearance: nonebyła dla mnie kluczem.

Znalazłem bardzo proste rozwiązanie

<input type="text" inputmode="numeric" />

Obsługiwane jest większość przeglądarek: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode