8

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.

kjhughes
  • 106,133
  • 27
  • 181
  • 240
Xavier_Ex
  • 8,432
  • 11
  • 39
  • 55
  • I don’t see a problem with using `letter-spacing` for `input`. There is no specification on what should really happen, but modern browsers seem to be rather consistent here. (They differ in the interpretation of the `size` attribute, but that’s a different story.) Please show some code you have used and explain what is wrong with the results, and on which browser(s). Do you mean that you *also* have the `width` property set? Then that would be the culprit. – Jukka K. Korpela Feb 05 '14 at 20:01
  • 1
    @JukkaK.Korpela the jsfiddle posted by beautifulcoder shows precisely the code in question. There is no problem with using letter-spacing in input, it is that the "size" attribute of it does not take into account letter-spacing. So if you have an `` its length will hold 3 characters with 0 letter-spacing. This is not honour in Chrome at least. – Xavier_Ex Feb 05 '14 at 20:39

2 Answers2

5

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/

beautifulcoder
  • 10,832
  • 3
  • 19
  • 29
  • The question says “it does not take into account letter-spacing”. It’s difficult to say what that meant, but this answer seems to be implied in the question. And `letter-spacing` adds to spacing between characters, not kerning (which is an entirely different concept). – Jukka K. Korpela Feb 05 '14 at 19:57
  • 1
    Unfortunately this is not working in my Chrome. I did realized that FF takes letter-spacing into account when rendering input fields with size though, so I guess it's just browser inconsistency. – Xavier_Ex Feb 05 '14 at 20:36
0

You can widen it dynamically using onkeypress.This might be helpful Adjust width of input field to its input

Community
  • 1
  • 1
amudhan3093
  • 740
  • 9
  • 17
  • 1
    Well that is one thing, but in my case the width isn't dynamic. I just want to set a static width, knowing in advance how many characters it will hold, and how much space is between each character (letter-spacing). – Xavier_Ex Feb 05 '14 at 18:39