Hi all, I'm new here at daniweb.com and I have this question that want to share with you.
Lately I've been trying to set the width of an input so it shows an expecific number of chars according to it's font size. I mean: <input id="myInput" type="text" value="12345678901234567890" /> as you can see, this is an input with 20 characters in it. What I want to do is to set it's width to match exactly 20 chars. I was wondering if there is some way of doing this width css, maybe something like this:

<style type="text/css">
        width:20ex; /*it's my understanding that the ex unit should be the x-height for a font*/


PS:sorry for my english.

9 Years
Discussion Span
Last Post by abdesigns2011

Thanks almostbob but I was wondering how to do this on CSS so I dont have to set the lenght for every input on my site like that.

Sorry MidiMagic but that would make the input 20 times the size of the line-height wich is much larger than the width of a char.

taking advantage of almostbob post, i think i could remake my question like this..
wich CSS property (or combination of CSS properties) is equivalent to the following.

<input width="20" />


You can use the "ch" CSS length unit, which is the width of the font's 0 character. Not sure on overall browser support. width: 20ch;

Edited by abdesigns2011: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.