January 7, 2010

Form Element Borders

Forms seem particularly fiddly when it comes to getting layout working across browsers. The different default padding and border widths on text fields and text areas often throw things out.

I did a little survey of the combined padding and border thicknesses on various browsers, so that I can get this right without lots of cross-browser testing and associated tearing out of hair.

The short version: to play it safe, take 6px off the width of text fields and text areas to leave room for padding and borders.

The longer version:

Why not just override the padding and borders to make them the same across all browsers? I generally like to muck with the default styles for things like this as little as possible, so that users get an experience consistent with their OS.