Dynamic width of input text field (HTML)

Question

How can I get a text box that inherits the width of the container?

For example, I have a div that has a text box inside.

<div id='content' style='width:100%;'> <input type='text' name='txtUsername'> </div>

What I wanted to do was when I resize my browser, the text box should follow the width of its parent div.

Using the code above, the text box always overflows the container when I resize the browser to a smaller width.

Answer 1

You should use box-sizing:border-box along with width:100% . Thus, input will correspond to 100% of the container width, but will not overflow it due to the addition of input padding:

 #content input { width:100%; box-sizing:border-box; -moz-box-sizing:border-box; } 

Live demo: http://jsfiddle.net/745Mt/1/

Additional CSS information with examples: http://css-tricks.com/box-sizing/

Answer 2

Just add style='width:100%;' (or how much you need%) in Input

  <div id='content' style='width:100%;'> <input style='width:100%;' type='text' name='txtUsername'> </div> 

Answer 3

Have you tried setting the input width to 100%? eg.

 input {width:100%;}