javascript - password - input type number without arrows




Posso nascondere la casella di selezione del numero di input HTML5? (9)

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 alla risposta esistente ...

Firefox:

Nelle versioni correnti di Firefox, il valore predefinito (user agent) della proprietà -moz-appearance su questi elementi è il number-input . La modifica di tale valore al campo di textfield del valore rimuove efficacemente la textfield .

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

In alcuni casi, è possibile che lo spinner sia nascosto inizialmente e quindi venga visualizzato in modalità hover / focus. (Questo è attualmente il comportamento predefinito in Chrome). Se è così, puoi usare 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 (user agent) della proprietà -webkit-appearance su questi elementi è già textfield . Per rimuovere lo spinner, il valore della proprietà -webkit-appearance deve essere modificato in none sulle classi pseudo ::-webkit-outer-spin-button / ::-webkit-inner-spin-button-webkit-appearance: inner-spin-button di 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 questo margin: 0 viene utilizzato per rimuovere il margine nelle versioni precedenti di Chrome.

Attualmente, al momento della stesura di questo, ecco lo stile utente user 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;
}

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

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

Firefox 29 al momento aggiunge il supporto per gli elementi numerici, quindi ecco uno snippet per nascondere gli spinners 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">


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

E ho trovato un modo per superare questo tipo di problemi.

Innanzitutto, devi attivare la funzione shadow-root di chrome mediante "DevTools -> Impostazioni -> Generale -> Elementi -> Mostra DOM per l'agente ombra DOM"

Quindi puoi vedere tutti gli elementi DOM in ombra , ad esempio, per <input type="number"> , l'elemento completo con DOM in ombra è:

<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 in base a queste informazioni, puoi creare dei CSS per nascondere elementi indesiderati, proprio come ha detto @Josh.


Non è quello che hai chiesto, ma lo faccio a causa di un bug di attivazione 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 quello di cui hai bisogno.


Prova a usare invece input type="tel" . Si apre una tastiera con i numeri e non mostra le caselle di selezione. Non richiede JavaScript o CSS o plugin o altro.


Questa è una risposta migliore che vorrei suggerire al mouse sopra e senza il mouse sopra

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


Su Firefox per Ubuntu, basta usare

    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 o pseudo-elemento sconosciuto '-webkit-outer-spin-button'. Ruleset ignorato a causa del cattivo selettore.

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


input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none;
<input id="test" type="number">







numbers