Textbox width

How to set the width of a textbox equally across browsers.

by petermorlion

HTML

<h1>Version 3 - works!</h1>
<div class="container">
    <p>
        Elements below must have same width, but some pixels are added to the input.
    </p>
    <p>
        Setting the border explicitly will make it a little more narrow, but not enough. Two pixels are still added.
    </p>
    <p>
        So we need to subtract 2px from our CSS width (i.e. make it 238px wide).
    </p>
    <input class="input-width input" />
    <div class="div-width marker">This div is (at least in my browser) exactly 240 pixels wide.</div>
</div>

CSS

* { margin: 0; padding: 0; }
.container { padding: 10px; }
p { margin-bottom: 10px; }

.div-width { width: 240px; }
.input-width { width: 238px; }
/*.input-width { width: 240px; }*/
.marker { background-color: red; }

.input { 
    border: 1px solid; 
    border-top-color: #ABADB3;
    border-left-color: #E2E3EA;
    border-right-color: #DBDFE6;
    border-bottom-color: #E3E9EF;
}