Issue
I have been playing around with monofonts (because every character as wide as the next) to match length of input field.
How come 5rem
is equal to 10 characters? into my input field in both Chrome and Firefox? You would expect 10 characters to have width 10rem
:
input[type="text"] {
border: 0;
outline: 0;
background: transparent;
border-bottom: 2px solid black;
font-family: 'monospace';
overflow: hidden;
width: 5rem;
}
<body id="body">
<form onSubmit="return false">
<input type="text" placeholder="your name" maxlength="10" required />
<input type="submit" />
</form>
</body>
http://codepen.io/alfredwesterveld/pen/RrypPv
Solution
The unit you are looking for is ch
: This unit represents the width of the character '0' in the current font. In a monospace font, 1ch
is equivalent of all character width.
input {
border: 0;
outline: 0;
background: transparent;
border-bottom: 2px solid black;
font-family: monospace;
width: 9ch;
}
<input type="text" placeholder="your name" maxlength="10" required />
To answer your question, monopsace characters have often a height two times bigger than their width. So 1ch ≈ 0.5em
and 5em ≈ 10ch
.
Answered By - tzi
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.