An ‘s width is generated from its size attribute. The default size is what’s driving the auto width.
You could try width:100% as illustrated in my example below.
Smaller size, smaller width:
Here’s the best I could do after a few minutes. It’s 1px off in FF, Chrome, and Safari, and perfect in IE. (The problem is #^&* IE applies borders differently than everyone else so it’s not consistent.)
Thanks. width:100% is not the same thing tho. It will overflow the parent box if there are margins or a border.
You could explicitly set these to adjust how you want, e.g. border:2px inset #eee; margin:-2px . Haven’t tested it myself though but something along those lines.
Thanks Steve. You should also check out stackoverflow.com/questions/1030793/… which has some other interesting ideas.
you can use set the inputs box-sizing property to border-box to stop the border from overlapping the container.
ORIGINAL answer using Angular: Because input ‘s width is controlled by it’s size attribute, this is how I initialize an input width according to its content:
UPDATE for JavaScript(10/01/2022): My original answer was from the time I was studying Angular. If you need pure, Vanilla JavaScript the solution is even simpler:
Or add an «input» event listener to your input html element and run a code like this:
Obs: Depending on the browser, input may restore to its default size of something between 150px and 250px if/when size gets the 0 value. In this case, just add +1 to value.length :
Although this #angular specific answer is not a valid answer to the OP’s question (and I’m not upvoting), I did come to this topic just to find this particular idea.
Watch out since [size]=»0″ will give an error. And with any solution setting size you may want to use font-family: monospace since . is a lot narrower than WWWWW and size does not consider the contents, just the length at the current font size.
Note that the size attribute is only valid for email , password , tel , and text input types. developer.mozilla.org/en-US/docs/Web/HTML/Element/…. Other input types must be controlled with CSS width (developer.mozilla.org/en-US/docs/Web/HTML/Element/input/…).
«Is there a definition of exactly what width:auto does mean? The CSS spec seems vague to me, but maybe I missed the relevant section.»
No one actually answered the above part of the original poster’s question.
As long as the value of width is auto, the element can have horizontal margin, padding and border without becoming wider than its container.
On the other hand, if you specify width:100%, the element’s total width will be 100% of its containing block plus any horizontal margin, padding and border. This may be what you want, but most likely it isn’t.
To visualise the difference I made an example: http://www.456bereastreet.com/lab/width-auto/
As stated in the other answer, width: auto doesn’t work due to the width being generated by the input’s size attribute, which cannot be set to «auto» or anything similar.
There are a few workarounds you can use to cause it to play nicely with the box model, but nothing fantastic as far as I know.
First you can set the padding in the field using percentages, making sure that the width adds up to 100%, e.g.:
Another thing you might try is using absolute positioning, with left and right set to 0. Using this markup:
This absolute positioning will cause the input to fill the parent fieldset horizontally, regardless of the input’s padding or margin. However a huge downside of this is that you now have to deal with the height of the fieldset, which will be 0 unless you set it. If your inputs are all the same height this will work for you, simply set the fieldset’s height to whatever the input’s height should be.
Other than this there are some JS solutions, but I don’t like applying basic styling with JS.
It may not be exactly what you want, but my workaround is to apply the autowidth styling to a wrapper div — then set your input to 100%.
If you’re willing to include a little JavaScript to solve this, you can get exact sizing. This doesn’t rely on approximating width with size or em s, doesn’t rely on any hardcoded element widths, and works for e.g., type=»number» , which don’t accept a size attribute.
The trick is to get your input sized exactly like a span with the same content, by actually having an invisible span with the same content.
Put your input inside a div along with a span that mirrors the input ‘s value. Give both the input and the span the same styling, give the input 100% width , then hide the span and absolute-position the input to sit on top of the span .
This way, the container (and thus the input ) are automatically sized by the visual appearance of the content of the invisible span .
Which one is optimal cross-browser code? Of course it depends on requirements, but I’m curious to know how people decide and on what basis.
It’s usually a bad idea to use «px» on the web. You might consider using relative units instead («em», «%», etc.).
10 Answers 10
You can use both. The css style will override the size attribute in browsers that support CSS and make the field the correct width, and for those that don’t, it will fall back to the specified number of characters.
Edit: I should have mentioned that the size attribute isn’t a precise method of sizing: according to the HTML specification, it should refer to the number of characters of the current font the input will be able to display at once.
However, unless the font specified is a fixed-width/monospace font, this is not a guarantee that the specified number of characters will actually be visible; in most fonts, different characters will be different widths. This question has some good answers relating to this issue.
Most fonts are not mono-width. Regarding «the number of characters the field will be able to display at once». Which character do you mean?
@jbyrd Yes, that is the case—but the answer is correct according to the HTML specification. I’ve edited the answer now to clarify things a bit.
I suggest, probably best way is to set style’s width in em unit 🙂 So for input size of 20 characters just set style=’width:20em’ 🙂
In CSS, em is relative to the font-size of its direct or nearest parent. An example: if the inherited font-size of an element is 16px, and you set the font-size to be 2em, the resulting size will be 32px (16px*2em). The «em» unit is not character quantity. More: w3.org/TR/css3-values/#font-relative-lengths and kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs and j.eremy.net/confused-about-rem-and-em
@Jess, good question. In typography, ’em’ used to mean the width of the ‘M’ character. For a long time, I believed the same thing. However, in CSS and digital typography, the ’em’ equals the height of the font in points. This is to accommodate character sets that do not have the ‘M’ character, or where the ‘M’ is not the full height or width of the font.
size is inconsistent across different browsers and their possible font settings.
The width style set in px will at least be consistent, modulo box-sizing issues. You might also want to set the style in ‘em’ if you want to size it relative to the font (though again, this will be inconsistent unless you set the input’s font family and size explicitly), or ‘%’ if you are making a liquid-layout form. Either way, a stylesheet is probably preferable to the inline style attribute.
You still need size for to get the height to line up with the options properly. But I’d not use it on an .
I want to say this goes against the «conventional wisdom», but I generally prefer to use size. The reason for this is precisely the reason that many people say not to: the width of the field will vary from browser to browser, depending on font size. Specifically, it will always be large enough to display the specified number of characters, regardless of browser settings.
For example, if I have a date field, I typically want the field wide enough to display either 8 or 10 characters (two digit month and day and either two or four digit year, with separators). Setting the size attribute essentially guarantees me that the entire date will be visible, with minimal wasted space. Similarly for most numbers — I know the range of values expected, so I’ll set the size attribute to the proper number of digits, plus decimal point if applicable.
As far as I can tell, no CSS attribute does this. Setting a width in em, for example, is based off the height, not the width, and thus is not very precise if you want to display a known number of characters.
Of course, this logic doesn’t always apply — a name entry field, for example, could contain any number of characters. In those cases I’ll fall back to CSS width properties, typically in px. However, I would say the majority of fields I make have some sort of known content, and by specifying the size attribute I can make sure that most of the content, in most cases, is displayed without clipping.
How can the size of an input text box be defined in HTML?
and in a separate CSS file apply the necessary styling:
If you want to limit the number of characters that the user can type into this textbox you could use the maxlength attribute:
also: you can change the width in terms of «em» (and not «px») and then the size is proportional to the font-size of the text box
The size attribute works, as well
If the input is type «text» or «password» then the size refers to the number of characters. You can control the width of the input that way. See Mozilla docs
Well- The font-size (style=»font-size:18pt») was the one I was looking for and that also increases the size of the box. Though not explicitly asked by the OP, it also adds value.
This worked. Hence thanks a lot. However the text seems to center itself vertically. Can I prevent this in any way?
You can set the width in pixels via inline styling:
You can also set the width with a visible character length:
The «size» specifies the visible width in characters of the element input.
You can also use the height and width from css.
Highly active question. Earn 10 reputation (not counting the association bonus) in order to answer this question. The reputation requirement helps protect this question from spam and non-answer activity.
Linked
Related
Hot Network Questions
Subscribe to RSS
To subscribe to this RSS feed, copy and paste this URL into your RSS reader.
By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.
