Posso nascondere la casella di selezione dell'input del numero HTML5?

Esiste un modo coerente tra i browser per nascondere le nuove caselle di selezione che alcuni browser (come Chrome) rendono per l'input HTML di tipo numero? Sto cercando un metodo CSS o JavaScript per impedire la visualizzazione delle frecce su / giù.

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

Questo CSS nasconde efficacemente il pulsante di selezione per i browser webkit (l'ho testato in Chrome 7.0.517.44 e Safari Versione 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" />

Puoi sempre usare inspector (webkit, possibilmente Firebug per Firefox) per cercare proprietà CSS abbinate per gli elementi che ti interessano, cercare elementi pseudo. Questa immagine mostra i risultati per un elemento di input type = "number":

Firefox 29 attualmente aggiunge il supporto per gli elementi numerici, quindi ecco uno snippet per nascondere i filatori nei browser basati su webkit e 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">

Risposta breve:

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

Risposta più lunga:

Per aggiungere una risposta esistente ...

Firefox:

Nelle versioni correnti di Firefox, il valore predefinito (agente utente) della -moz-appearanceproprietà su questi elementi è number-input. Modificandolo sul valore si textfieldrimuove efficacemente il filatore.

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

In alcuni casi, potresti voler inizialmente nascondere lo spinner e poi apparire su hover / focus. (Questo è attualmente il comportamento predefinito in Chrome). In tal caso, è possibile utilizzare quanto segue:

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

<input type="number"/>

Cromo:

Nelle versioni correnti di Chrome, il valore predefinito (agente utente) della -webkit-appearanceproprietà su questi elementi è già textfield. Per rimuovere lo spinner, il -webkit-appearancevalore della proprietà deve essere modificato nonenelle classi ::-webkit-outer-spin-button/ ::-webkit-inner-spin-buttonpseudo (è -webkit-appearance: inner-spin-buttondi default).

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

<input type="number" />

Vale la pena sottolineare che margin: 0viene utilizzato per rimuovere il margine in precedenza versioni di Chrome.

Attualmente, al momento della stesura di questo, ecco lo stile dell'agente utente predefinito sulla pseudo classe '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;
}

Secondo la guida alla codifica dell'esperienza utente di Apple per Safari mobile , puoi utilizzare quanto segue per visualizzare una tastiera numerica nel browser iPhone:

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

A patterndi \d*funzionerà anche.

Prova ad usare input type="tel"invece. Apre una tastiera con numeri e non mostra caselle di selezione. Non richiede JavaScript o CSS o plugin o altro.

Aggiungi questo CSS solo per rimuovere il filatore sull'input del numero

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

Ho riscontrato questo problema con a input[type="datetime-local"] , che è simile a questo problema.

E ho trovato il modo di superare questo tipo di problemi.

Innanzitutto, è necessario attivare la funzione di root-shadow di Chrome tramite "DevTools -> Impostazioni -> Generale -> Elementi -> Mostra DOM ombra utente agente"

Quindi puoi vedere tutti gli elementi DOM ombreggiati , ad esempio, poiché <input type="number">l'elemento completo con DOM ombreggiato è:

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

E secondo queste informazioni, puoi redigere alcuni CSS per nascondere elementi indesiderati, proprio come ha detto @Josh.

Non è quello che mi hai chiesto, ma lo faccio a causa di un bug di focus in WebKit con spinbox:

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

Potrebbe darti un'idea per aiutarti con ciò di cui hai bisogno.

Questa è la risposta migliore che vorrei suggerire al passaggio del mouse e senza il passaggio del mouse

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

Per far funzionare questo in Safari ho scoperto che aggiungere! Importante alla regolazione del webkit costringe a nascondere il pulsante di selezione.

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 */
}

Ho ancora problemi a elaborare una soluzione anche per Opera.

Su Firefox per Ubuntu, semplicemente usando

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

ha fatto il trucco per me.

Aggiunta

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

Mi porterebbe a

Pseudo-classe sconosciuta o pseudo-elemento '-webkit-outer-spin-button'. Set di regole ignorato a causa di un selettore errato.

ogni volta che ci ho provato. Lo stesso vale per il pulsante di selezione interno.

Forse cambi il numero inserito con javascript in testo quando non vuoi uno spinner;

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

e impedisce all'utente di inserire il testo;

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

quindi fai in modo che javascript lo cambi di nuovo nel caso in cui desideri uno spinner;

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

ha funzionato bene per i miei scopi

Nei browser basati su WebKit e Blink e All Kind Of Browser usa il seguente CSS:

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

Ne avevo bisogno per funzionare

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

La linea extra di è appearance: nonestata la chiave per me.

Ho trovato una soluzione super semplice usando

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

Questo è supportato dalla maggior parte dei browser: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode