Scorrimento orizzontale campo numerico cromato

Ho creato un campo numerico con il testo all'interno allineato a destra.Scorrimento orizzontale campo numerico cromato

Usecase:

Se si seleziona il testo completo o quando si utilizza il tasto centrale del mouse all'interno del campo di input per scorrere ho notato che è possibile scorrere il testo per circa 1px a sinistra. Finora ho potuto provocare solo questo comportamento in Chrome.

Potete vederlo in azione con questo codice:

<input type="number" value="15" style="text-align: right;" />

Soluzione:

probabilmente potrei disabilitare lo scorrimento sull'elemento ma volevo chiederti se esiste un modo elegante per risolvere questo.

Qui potete vedere il codice: http://codepen.io/anon/pen/mEmAvz

fonte

2016-06-30 pluga

Tutto quello che posso fare è di confermare che questo accade in cromo pure, ed esclusivamente , per quanto posso dire. Sembra essere semplicemente un problema tecnico con l'implementazione di Chromium dei pulsanti di aumento/diminuzione del numero. Ho giocato con poche impostazioni molto velocemente, ma senza dadi. – TheThirdMan

@makshh Grazie per la risposta! La persona in questa discussione ha voluto disabilitare la modifica del numero che si verificava quando il campo scorreva. Ho solo un problema visivo in cui il numero è sfalsato di pochi pixel quando il testo è selezionato/il pulsante di middlemouse viene premuto. – pluga

E ciò accade solo con 'text-align: right'? – makshh

Si potrebbe usare text-indent con calc. In questo modo:

html { 
box-sizing: border-box; 
} 

*, *:before, *:after { 
box-sizing: inherit; 
} 

input { 
    width: 100%; 
    text-indent: calc(100% - 1.5em); 
    font-size: 1em; 
}

https://jsfiddle.net/VilleKoo/u2ead3gz/1/

fonte

2016-07-06 17:55:03 VilleKoo

Prova a scrivere qualcosa come "999999" e unfocus. – makshh

-2

non ho capito esattamente quello che vuoi, ma io la penso così
<input type="number" style="text-indent: calc(100% - 1.5em);" />

fonte

2016-07-08 11:16:49

Scorrimento orizzontale campo numerico cromato

risposta

Problemi correlati