Question

I’d like to standardize the full width and height (that is, the width and height including padding and border etc) in <input>, <select>, and <button> without losing the native styles that browsers use by default.

Is this possible? I’m open to using browser detection and JavaScript in addition to CSS.

Answer 1

Use

input, select, textarea, button{

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

if you want the paddings and borders to eat from the width

demo at http://jsfiddle.net/gaby/WaxTS/222/

---

Use

input, select, textarea, button{
    -ms-box-sizing:content-box;
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
}

if you want the paddings and border to be added to the width.

demo at http://jsfiddle.net/gaby/WaxTS/224/

notice for this case, buttons will not match the rest of the elements because they have different borders and if you mess with that, you disable the native look.