Remove input field default width

Question

I have a input field for users & others like email, telephone etc.

I want a input field which take the width of his content because user name can be small & large but right now what happens if the text is small it's take default width which leave some unwanted space from the right.

I tried float, inline but nothing works.

Check the fiddle http://jsfiddle.net/sandeep/Qa8R5/

I didn't want javascript for this

Thanks

I think you'll need javascript to have a dynamically expanding input — Alex, Oct 11 '11 at 11:40
You might be interested in [editable DIV tag](http://stackoverflow.com/questions/1188581/how-to-make-a-div-editable-cross-browser) instead. — Shadow The GPT Wizard, Oct 11 '11 at 11:44

thirtydot · Accepted Answer · 2021-10-17T14:18:42.820

7

There is no way using only CSS to make an input element as wide as the text inside it.

The reason is to do with the fact that input is a replaced element.

You need JavaScript, something like this.

edited Oct 17 '21 at 14:18

answered Oct 11 '11 at 11:49

thirtydot

224,678
48
389
349

it's said :( we can style them with css but not override there default properties . I like the reason why we can't override it's thanks. – sandeep Oct 11 '11 at 12:02
1

The "replaced element" link appears to lead to a general index. I've found [the CSS definition](https://www.w3.org/TR/CSS2/conform.html#replaced-element) helpful, so here it is. (By the way, that definition does not seem to be obsolete by the new specifications as of October 2021.) – Jean-David Lanz Oct 15 '21 at 09:04
1

I just stumbled over the section of the HTML documentation about [replaced elements](https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements), so I'm adding it here too. – Jean-David Lanz Oct 15 '21 at 15:24

score 1 · Answer 2 · answered Oct 01 '21 at 19:22

1

You can hack this like

html:

<div class="input-wrapper">
   <input />
</div>

css:

.input-wrapper {
  position: relative;
  width: /*any width you want*/;
  height: /*any height you want*/;
}

input {
  position: absolute;
  width: 100%;
  height: 100%;
}

answered Oct 01 '21 at 19:22

Dálcio Macuete Garcia

793
7
10

score 1 · Answer 3 · edited May 23 '17 at 12:22

I know you said you don't want JavaScript, but JS is the only way to answer your question.

Here's a working fiddle that demonstrates this functionality. Below is the code that is necessary to accomplish it. Source: jQuery - auto size text input (not textarea!)

Plugin:

(function($){

$.fn.autoGrowInput = function(o) {

    o = $.extend({
        maxWidth: 1000,
        minWidth: 0,
        comfortZone: 70
    }, o);

    this.filter('input:text').each(function(){

        var minWidth = o.minWidth || $(this).width(),
            val = '',
            input = $(this),
            testSubject = $('<tester/>').css({
                position: 'absolute',
                top: -9999,
                left: -9999,
                width: 'auto',
                fontSize: input.css('fontSize'),
                fontFamily: input.css('fontFamily'),
                fontWeight: input.css('fontWeight'),
                letterSpacing: input.css('letterSpacing'),
                whiteSpace: 'nowrap'
            }),
            check = function() {

                if (val === (val = input.val())) {return;}

                // Enter new content into testSubject
                var escaped = val.replace(/&/g, '&amp;').replace(/\s/g,' ').replace(/</g, '&lt;').replace(/>/g, '&gt;');
                testSubject.html(escaped);

                // Calculate new width + whether to change
                var testerWidth = testSubject.width(),
                    newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,
                    currentWidth = input.width(),
                    isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
                                         || (newWidth > minWidth && newWidth < o.maxWidth);

                // Animate width
                if (isValidWidthChange) {
                    input.width(newWidth);
                }

            };

        testSubject.insertAfter(input);

        $(this).bind('keyup keydown blur update', check);

    });

    return this;

};

})(jQuery);

Usage:

$('input#myinput').autoGrowInput({
    comfortZone: 50,
    minWidth: 200,
    maxWidth: 2000
});

That is a lot of code for a simple function. [This way](http://jsfiddle.net/Qa8R5/3/) works well, too. Maybe not as robust, but it's simpler. — bricker, Oct 11 '11 at 11:54
It's close, but as @thirtydot mentioned, you need something more robust than that. `Try filling that input with WWWWWW` — James Hill, Oct 11 '11 at 12:00
`font-family: "Courier New";` :D just kidding, you two are correct. — bricker, Oct 11 '11 at 12:03
hey james; i already Knows that there is an solution with javascript But i want to know can we do it with css & if not why. — sandeep, Oct 11 '11 at 12:21
@sandeep, Thanks for the clarification. Please note, you question simply said `I dont' want javascript for this` - it did not ask for an explanation why CSS wouldn't work. With that being said, for the sake of a great answer, I should have included why CSS wouldn't work. — James Hill, Oct 11 '11 at 12:24

score 0 · Answer 4 · answered Oct 11 '11 at 11:53

0

You have to use Javascript, or something else that can generate content dynamically. HTML and CSS can't do it. Here is a solution using jQuery, take it or leave it: http://jsfiddle.net/Qa8R5/3/

answered Oct 11 '11 at 11:53

bricker

8,911
2
44
54

1

You need something more complex than that. Try filling that `input` with `WWWWWW`.. – thirtydot Oct 11 '11 at 11:56
I see your point, but whose name is "WWWWWW"? ;) just kidding. – bricker Oct 11 '11 at 11:59

Remove input field default width

4 Answers4