CODEWITHSUNDEEP
htmlcssgoogle-chrome
Xavier_Ex
Xavier_Ex

Reputation: 8810

Input size with letter spacing

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.

Upvotes: 10

Views: 15429

Answers (2)

beautifulcoder
beautifulcoder

Reputation: 11320

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/

Upvotes: 5

amudhan3093
amudhan3093

Reputation: 750

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

Upvotes: 0

Related Questions