title: Keep <input type="text" /> at 100% width from overflowing its container without HTML hacks and also making it still look like a textbox?
body: <p>First off, I say "without HTML hacks" in the subject because I don't have enough room to put all of these hacks on a single line.</p>
  
  <p>I came across these questions, but they do not serve my needs:</p>
  
  <p><a href="https://stackoverflow.com/questions/16907518/css-input-with-width-100-goes-outside-parents-bound">CSS Input with width: 100% goes outside parent&#39;s bound</a><br>
  <a href="https://stackoverflow.com/questions/5088279/how-to-set-the-same-width-for-html-text-input-and-drop-down-input">How to set the same width for HTML text input and drop down input</a><br>
  <a href="https://stackoverflow.com/questions/628500/can-i-stop-100-width-text-boxes-from-extending-beyond-their-containers">Can I stop 100% Width Text Boxes from extending beyond their containers?</a></p>
  
  <p>Here are some reasons why:</p>
  
  <ul>
  <li>I cannot use block elements</li>
  <li>The input must retain its bevel/inset style so that it looks like a textbox (the business will not like an inconspicuous rectangle with a 1px solid border around it)</li>
  <li>No CSS3 (some users are still on IE6 and IE7)</li>
  <li>I cannot go wrapping every single input on our company website with magical DIV elements.</li>
  </ul>
  
  <p>I've discovered that the <code>&lt;!DOCTYPE&gt;</code> directive affects this overflow behavior on inputs.  Research has told me that, without this directive, the browser is in quirks mode.  I guess that's why, in quirks mode, inputs look... correct?  I don't get it.</p>
  
  <p>At any rate, here is a fiddle:</p>
  
  <p><a href="http://jsfiddle.net/pJkGB/2/" rel="nofollow noreferrer">http://jsfiddle.net/pJkGB/2/</a></p>
  
  <p>In case of rot, here's the HTML in that fiddle:</p>
  
  <pre><code>&lt;input id="txtwoo" style="width:300px" type="text" /&gt;
  &lt;br /&gt;
  &lt;select id="cbowoo" style="width:300px"&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>Notice how the textbox is wider than the dropdown.  I want the <em>outer bounds</em> of the textbox to match the exact same width of the dropdown right down to the pixel (outer bounds included any borders, margins, etc).  The dropdown must be left alone.  I do not want to wrap the input with any elements.  I want a style that I can apply directly to the text input itself that will keep it from extending past the set pixel width.  I want it to retain its bevel/inset style.</p>
  
  <p>If this is impossible, your answer of "you cannot do this" will suffice as an answer.  Otherwise, please fiddle with my fiddle and let me know how I can get this to work.</p>