Auto input grow with CSS (but is it a bug?)

I’ve been looking at the del.icio.us auto text grow functionality recently, and noticed you can achieve a similar effect in CSS, but only for IE.

I originally thought this was a bug since it didn’t work in Firefox or Safari.

The following CSS in IE causes any input element to grow to the max width of it’s contents.

input { overflow: visible; }

The effect is that text input boxes automatically growth to the size of the content that you enter mirroring the functionality seen in the tag search on del.icio.us.

However, the question is whether (and I’ve not read the w3.org specs in detail) the ‘width’ CSS attribute should stop this from working, and whether it should work in Firefox and Safari.

My feeling was that IE was incorrectly making use of this CSS, but what do you think?

4 Responses to “Auto input grow with CSS (but is it a bug?)”

  1. Grow Box Hydroponics Guru September 10th, 2007 at 7:21 pm

    I was surfing the internet Monday afternoon during my break, and found your blog by searching MSN for grow a box. This is a topic I have great interest in, and follow it closely. I liked your insight on input grow with CSS (but is it a bug?) very much, but I don’t quite aggree with everything you said. However it is still good reading, and makes some good points. Keep up the good work…

  2. I discovered growing input boxes in joomla. I wanted to stop it and succeeded by adding overflow:hidden to the rules for the input-fields. Your article was the first I found and made me solve my display problem within 5 minutes. So, thanx!

  3. I’m glad I ran across your post. This css ‘feature’ fixed a cosmetic problem I had endured with an internal webtool (built for IE) that uses table cells containing editable text input fields. I wanted to minimize the field size without truncating any text in the field. If only I had read about this a few years ago…. better late than never.

  4. I’ve always found IE to be quirky with input boxes.

    Why does it seem to apply % widths to the textual content instead of the container.
    .e.g. if it is in a table column and has a title that is longer than the column if you set the width to say 75% it makes the text box 75% the width of the text as apose to the table column.

Leave a Reply
Not required

CODE: Please escape code and wrap in <pre><code>, doing so will automatically syntax highlight