Czy Mogę ukryć pole spin wprowadzania numeru HTML5?

Firefox 29 obecnie dodaje obsługę elementów liczbowych, więc oto fragment ukrywania spinnerów w przeglądarkach opartych na webkit 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 aktualnych wersjach Firefoksa domyślna wartość (user agent) -moz-appearance właściwość {[31] } na tych elementach to number-input. Zmiana na wartość textfield skutecznie usuwa spinner.

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

W niektórych przypadkach możesz chcieć, aby spinner był ukryty początkowo, a następnie pojawił się po najechaniu na kursor/focus. (To obecnie domyślne zachowanie w Chrome). Jeśli tak, możesz użyć następującego:

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

<input type="number"/>

Chrome:

W aktualnych wersjach Chrome domyślna wartość (user agent) -webkit-appearance właściwość na tych elementach jest już textfield. Aby usunąć spinner, wartość właściwości -webkit-appearance musi zostać zmieniona na none na ::-webkit-outer-spin-button/::-webkit-inner-spin-button pseudo klasy (domyślnie jest to -webkit-appearance: inner-spin-button).

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

<input type="number" />

To warto zwrócić uwagę, że margin: 0 służy do usuwania marginesu w starszych wersjach Chrome.

Obecnie, w chwili pisania tego, oto domyślna stylizacja agenta użytkownika na pseudo klasie 'inner-spin-button':

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;
}

Aby wyświetlić klawiaturę numeryczną w przeglądarce iPhone ' a, należy skorzystać z poniższego podręcznika user experience coding guide firmy Apple dla mobilnego Safari:]}

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

A pattern z \d* również zadziała.

Spróbuj użyć input type="tel" zamiast tego. Wyskakuje Klawiatura z numerami i nie pokazuje okienek obrotowych. Nie wymaga JavaScript, CSS, wtyczek ani czegokolwiek innego.

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

I znalazłem sposób, aby przezwyciężyć tego rodzaju problemy.

Najpierw musisz włączyć funkcję shadow-root chrome przez "DevTools -> Settings -> General -> Elements - > Show user agent shadow DOM"

Wtedy możesz zobaczyć wszystkie shadowed DOM elementy , na przykład dla <input type="number">, pełny element z shadowed DOM jest:

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

Oraz zgodnie z tymi informacjami, możesz szkicować niektóre CSS, aby ukryć niechciane elementy, tak jak powiedział @Josh.

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

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

Nie to o co prosiłeś, ale robię to z powodu błędu Focusa w WebKit z 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";
}

Na Firefoksie dla Ubuntu, wystarczy użyć

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

Dodawanie

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

Doprowadziłoby mnie do

Nieznana pseudo-klasa lub pseudo-element '- webkit-outer-spin-button'. Zestaw reguł zignorowany z powodu złego selektora.

To jest lepsza odpowiedź, którą chciałbym zaproponować na mouse over i bez mouse over

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 to działało w Safari znalazłem dodanie !ważne dla webkitu dostosowanie wymusza ukrycie przycisku spin.

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 problem z wypracowaniem rozwiązania dla Opery.

Może zmienić wprowadzanie liczb za pomocą javascript na wprowadzanie tekstu, gdy nie chcesz spinnera;

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

I zatrzymać wprowadzanie tekstu przez użytkownika;

  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;
      }
  }

Następnie zmień javascript z powrotem w przypadku, gdy chcesz spinner;

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

To działało dobrze dla moich celów

Dodaj tylko ten css, aby usunąć spinner na wejściu 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;
}

Wiem, że odpowiedź na to pytanie jest stara, ale dodam trochę. Powyższe odpowiedzi (odnoszące się do odpowiedzi @ swehren) są poprawne, ale gdy wejście jest wyłączone, nadal można wpisywać znaki alfanumeryczne.