Input size with letter spacing

Question

An input element can have a size attribute that determines how many characters its width can hold, which is a neat feature in scenarios where the number of characters is fixed for certain types of input. For example the phone number, credit card number, customer ID number etc. In such cases it's more convenient to just put the size attribute on the input field than having to dig into the style sheet and define a width for each of them.

However, when putting the size attribute it does not take into account letter-spacing. If I want my numbers to be more spread apart, they overflow the input width. Is there any way I can specify the size of an input field taking into account letter spacing and potentially other things affecting text size?

HTML:
<input size="5" placeholder="#####"/>

CSS:
input { letter-spacing: 1em }

See this JSFiddle for the output. Notice that the placeholder text overflows the input field.

Note that this failure to account for letter-spacing when determining size happens in Chrome but not FF.

Answer 1

Try settingletter-spacing to set kerning between characters. This is honored when you change the size attribute.

input {
    letter-spacing: 0.25em;
}

http://jsfiddle.net/RhwBG/