Is it possible to style a text input to fill the width of it's parent?

css width textinput
Hubro picture Hubro · Jul 31, 2012 · Viewed 16.8k times · Source

I have had this issue for years and I've seen similar questions before, but none of them have addressed the fact that when setting width: 100% on an element - paddings, margins and borders will increase the width.

Have a look at this Fiddle.

The white topmost text box is a standard text box with it's width set to 100%. As you can see it overflows it's parent because of the margin, padding and border settings.

The green text box is styled like a div using position: absolute. This works like a dream in webkit browsers but nowhere else.

The red div is the control - I want the input to act just like that.

Are there any hacks/tricks I can employ to have my text inputs act just like the red div in all modern browsers, in other words, fit inside the padding of the parent? Please edit my Fiddle or create your own to accompany your answer. Thanks!

Answer

David says reinstate Monica picture David says reinstate Monica · Jul 31, 2012

You can:

input#classic
{
    width: 100%;
    padding: 5px;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;        
}

JS Fiddle demo.

Note I removed the margin, since that was causing an overflow, and set the box-sizing to determine the width of the element including the width of the borders and padding.

Related questions

How can I make a div not larger than its contents?

I have a layout similar to: <div> <table> </table> </div> I would like for the div to only expand to as wide as my table becomes.

Read More
How to set up fixed width for <td>?

Simple scheme: <tr class="something"> <td>A</td> <td>B</td> <td>C</td> <td>D</td> </tr> I need …

Read More
How to make a div fill a remaining horizontal space?

I have 2 divs: one in the left side and one in the right side of my page. The one in the left side has fixed width and I want the one of the right side to fill the remaining space.

Read More