2012-10-28 19 views
77

Solo cercando di rimuovere queste frecce, conveniente in determinate situazioni.Come rimuovere le frecce dall'input [type = "numero"] in Opera

Desidero mantenere la consapevolezza del browser che il contenuto è puramente numerico. Quindi cambiarlo in input[type="text"] non è una soluzione accettabile.


Ora che Opera è basato su webkit, questa domanda è un dulpicate di: Can I hide the HTML5 number input’s spin box?

+0

credo che questo non è possibile lo standard solo permette compairing di stringhe. – rekire

+0

So che questa è una vecchia domanda, ma nel caso in cui non sia ancora stata fornita una risposta, questo link aiuta? http: // css-trucchi.it/snippet/css/turn-off-number-input-spinners/ – drumwolf

risposta

191

Ho usato alcuni CSS semplici e sembra rimuoverli e funzionare correttamente.

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

This tutorial from CSS Tricks explains in detail & also shows how to style them

+1

Soprattutto il collegamento è importante! Grazie – craphunter

+16

Perché non tutti utilizzano un browser basato su WebKit: https://stackoverflow.com/questions/23372903/hide-spinner-in-input-number-firefox-29 –

+0

Voglio rimuovere la proprietà di incremento e decremento quando fai clic su arows – byteC0de

8

Non c'è modo.

Questa domanda è fondamentalmente un duplicato di Is there a way to hide the new HTML5 spinbox controls shown in Google Chrome & Opera? ma forse non un duplicato completo, poiché la motivazione è data.

Se lo scopo è "la consapevolezza del browser che il contenuto sia puramente numerico", è necessario considerare cosa significherebbe realmente. Le frecce, o spinner, fanno parte del rendere l'input numerico più comodo in alcuni casi. Un'altra parte sta verificando che il contenuto sia un numero valido e sui browser che supportano i miglioramenti di input HTML5, potresti farlo utilizzando l'attributo pattern. Questo attributo può anche influire su una terza funzione di input, ovvero sul tipo di tastiera virtuale che può apparire.

Ad esempio, se l'input deve essere esattamente di cinque cifre (come potrebbero essere i numeri postali, in alcuni paesi), allora <input type="text" pattern="[0-9]{5}"> potrebbe essere adeguato. Ovviamente dipende dall'implementazione di come verrà gestito.

+0

puoi ottenere la stessa funzionalità del tuo tentativo di preservare e anche rimuovere i filatori ... – JayD

+3

I filatori sono completamente inutili se vuoi inserire grandi numeri, come come somme di denaro. Allo stesso tempo potresti aver bisogno degli attributi min e max per loro. Esempio, quanto vuoi investire? Sarebbe una quantità di migliaia, ma potrebbe avere un minimo di 5000 e un massimo di 20000. Giralo, piccola. – Puce

13

Queste frecce fanno parte dello Shadow DOM, che sono fondamentalmente elementi DOM sulla tua pagina che sono nascosti da te. Se sei nuovo all'idea, una buona lettura introduttiva è can be found here.

Per la maggior parte, Shadow DOM ci fa risparmiare tempo ed è buono. Ma ci sono casi, come questa domanda, in cui si desidera modificarlo.

È possibile modificare questi in Webkit ora with the right selectors, ma questo è ancora nelle prime fasi di sviluppo. Lo stesso Shadow DOM non ha ancora selettori unificati, quindi i selettori del webkit sono proprietari (e non si tratta solo di aggiungere -webkit, come in altri casi).

Per questo motivo, sembra probabile che Opera non abbia ancora ottenuto l'aggiunta di questo. Trovare le risorse sulle modifiche all'Opera Shadow DOM è tuttavia difficile. Alcuni unreliable internet sources Ho trovato tutti dire o suggerire che Opera non supporta attualmente la manipolazione di Shadow DOM.

Ho passato un po 'di tempo a guardare attraverso il sito web di Opera per vedere se ci fosse qualche accenno a questo, insieme a cercare di trovarli in Dragonfly ... nessuna ricerca ha avuto fortuna. A causa del silenzio su questo problema e della natura in via di sviluppo della manipolazione Shadow DOM + Shadow DOM, sembra essere una conclusione sicura che non puoi farlo in Opera, almeno per ora.

Problemi correlati