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">
    #myInput{
        width:20ex; /*it's my understanding that the ex unit should be the x-height for a font*/
    }
</style>

Thanks.

PS:sorry for my english.

Recommended Answers

All 4 Replies

Make a style, and set the width to 20em (or 21 for some room) in the style.

@almostbob:
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.

@MidiMagic
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;

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.