Menu
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
945
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.
96
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
