Stop text input with 100% width and 10px padding extending beyond 100% width

Question

I am styling a text input with 100% width and 10px padding like this:

<div class="wrapper">
    Outer element
    <form method="get" id="searchform" action="#">
        <input type="text" class="field" name="s" id="s" placeholder="Search here...">
        <input type="submit" class="submit" name="submit" id="searchsubmit" value="GO">
    </form>
</div>

CSS:

.wrapper {
    background: #ccc;
    padding: 20px;
    width: 200px;
}

#s {
    width: 100%;
    display:block;
    padding: 10px;
}

#searchsubmit {
    display: block;
    width: 100%;
    padding: 10px;
}

The problem is the text input extends beyond the width of the wrapper. See example here.

I've tried adding "box-sizing: border-box" and -moz-box-sizing: border-box" but I'm still seeing the input extending beyond 100% on certain browsers e.g. Android.

Is there a solution to this?

Answer 1

Use box-sizing:

#s {
    width: 100%;
    display:block;
    padding: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Here is a demo.

Note: It's supported by all major browsers since IE8. For Android just don't forget the -webkit prefix. More Details