Sunday, February 23, 2014

Work Life: Correcting 100% Width Text Input to Fit into Container

I always find it odd that the default values of HTML for textboxes (aka text inputs) when you set the width to 100% always seem to be wider than than its container. 

By default, you would think that it would either contain the entirety of the textbox or spill over on all sides of the textbox. In the latter case, I expect to see overlap on the left as well as on the right.

To correct this, set your textbox style to the follow:

input
{
    margin: 0px;
    padding: 0px;
    border: 0px;
}

Default



Corrected




This happens in both IE10 and Google Chrome 33.0.1750.117 m.