Remove input field default width

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

I want a input f开发者_开发问答ield 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

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.

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
});

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%;
}

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/