Remove input field default width

Issue

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

Solution

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.

Answered By - thirtydot