iPhone: numeric keyboard for credit card input

Question

Currently I'm using <input type="text">

If I use <input type="number">, the problem is that in Chrome the input field starts to look like this, with up and down arrows:

image of input field with up and down arrows

Is there a better solution?

try `` from http://stackoverflow.com/questions/6178556/iphone-numeric-keyboard-for-text-input — Frank Conry, Jan 08 '14 at 19:16

score 2 · Accepted Answer · answered Jan 08 '14 at 19:17

Just add this to your css file to remove the arrows.

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

Hope that helps you!

1 Answers1