How to Make Text Boxes 100% Width Without Overflowing Their Container?

Overcoming the Bounds of 100% Width Text Boxes

In web development, it's common to encounter the dilemma of ensuring that text boxes fully occupy their intended width without exceeding its container's bounds. Assigning a CSS style with "display:block; width: 100%" might seem like a straightforward solution, but it can lead to unexpected issues due to default margins, borders, and padding in text boxes.

This can result in text boxes appearing wider than the actual container size, as seen in the example below:

<code class="html"><div id="outer">
  <div id="inner">
    <input type="text" class="wide">
    <div style="clear:both;"></div>
  </div>
</div></code>

Achieving the Desired Effect

To resolve this issue and ensure that text boxes don't exceed their container's width, CSS3 introduces the property 'box-sizing: border-box'. This redefines the definition of 'width' to encompass both internal padding and external borders.

However, due to CSS3's ongoing development, this property currently bears different names in different browsers:

<code class="css">input.wide {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}</code>

Alternative Approach for Older Browsers

If browser compatibility is a concern, an alternative approach involves adding 'padding-right' to the containing

or element. This compensates for the additional left-and-right padding/border in pixels that browsers typically assign to inputs (e.g., 6px for IE

The above is the detailed content of How to Make Text Boxes 100% Width Without Overflowing Their Container?. For more information, please follow other related articles on the PHP Chinese website!