Input elements that fill their container

Previously, this post advocated the use of “text-indent” on a padding-less, border-less, 100% width input. This works, but it’s quite clunky, and old versions of IE don’t support text-indent, so it just looks bad. A much better solution is to

Just use box-sizing.

As pointed out in the comments, the simplest solution is to simply change the box-sizing model of the input element to “border-box”, rather than the default “content-box”. In the example below, I’ve given the containing div a 4px whiteborder.

[sourcecode language=”xhtml”]

[/sourcecode]

Note that for Firefox, you still need to use the -moz- prefix; it’s supported unprefixed in all the other major browsers, though.

Updated 2012-08-03.

Comments

3 responses to “Input elements that fill their container”

  1. SamGoody Avatar

    Very nice. Clear. Useful.
    Thanks.

  2. hmmm Avatar
    hmmm

    another solution set

    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;

    to the input

  3. Arturo Serrano Avatar
    Arturo Serrano

    Very simple and elegant fix, Thank you very much!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

To respond on your own website, enter the URL of your response which should contain a link to this post’s permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post’s URL again. (Find out more about Webmentions.)