Come mostrare X (Clear) in Chrome INPUT con il tipo NUMBER?

Question

Ho creato un'applicazione che utilizza un ingresso, di tipo numerico:

<input type="number" min="-1000000" max="1000000" step="0.01"> 

In IE, questo ha un piccolo "clear" o [X] sul lato destro. I miei utenti lo trovano molto utile perché inseriscono grandi numeri in questi campi e spesso preferiscono cancellarli con un clic.

Si scopre che alcuni utenti preferiscono Chrome come browser. In Chrome, tuttavia, questa casella di testo mostra uno "spinner", che è una freccia su/giù. Questo è inutile qui perché non aumenteranno questi grandi numeri di 1 cent per raggiungere un obiettivo.

Sono stato in grado di cercare e trovare informazioni su come nascondere lo "spinner" in chrome, e ho anche visto che una casella di input di ricerca potrebbe darmi la [X] che stavo cercando, ma a costo di perdere il supporto integrato per il tipo di numero.

Non è stato possibile trovare alcun modo per specificare un campo [X]/Cancella nei campi INPUT di Chrome.

L'unica opzione che posso pensare è nascondere lo spinner usando CSS (penso che questo possa essere fatto), e aggiungendo il mio pulsante a destra invece, usando JS per cancellare la casella di testo. Prima di farlo, mi chiedevo se ci fosse un trucco che mi mancava.

L'altra opzione, che sembra meno allettante, sarebbe quella di convertire le mie caselle di testo in tipo ricerca, e quindi aggiungere tutto il numero manuale controllando la logica JS a mano.

Grazie!

Answer 1

Sembra che questo non sia possibile con CSS puro, poiché quando si ispeziona shadow dom per quell'elemento non è disponibile tale elemento. Comunque puoi sempre usare JS.

Answer 2

Ciò funzionerà in cromo:

input[type="search"] { 
    -webkit-appearance: searchfield; 
} 
input[type="search"]::-webkit-search-cancel-button { 
    -webkit-appearance: searchfield-cancel-button; 
}