title: Styling HTML FORM elements with padding, with width 100%
body: <p>I'm styling a form by using a table with fixed-width columns and I want the input elements inside the <code>&lt;td&gt;</code> to fill the container. I know the CSS box model and I know the elements would bleed through with <code>width: 100%</code>, but the problem is with its consistency.</p>
  
  <p><code>&lt;input&gt;</code> elements bleed through as expected but <code>&lt;select&gt;</code> elements don’t. This results in making my fields not line up properly. I've tried all properties like overflow, display, whitespace... it doesn’t make any difference. What’s with the <code>&lt;select&gt;</code> element? I can see in Firebug that they have the same box model properties with the input element, but they don’t render the same.</p>
  
  <p>I’m using HTML 5 doctype and this happens both in Firefox and Chrome.</p>
  
  <p>Right now, I’m fixing this using a JS function which selects all elements with class stretch and computes and sets the static width to make it fit inside the container. This perfectly lines up the elements of the form. (I had to exclude <code>&lt;select&gt;</code> elements because their widths were already okay... weird quirk.)</p>
  
  <p>Is there a pure CSS solution to this? I wouldn’t want to run this function everytime a part of the page is updated, like on AJAX calls...</p>