Keep <input type="text" /> at 100% width from overflowing its container without HTML hacks and also making it still look like a textbox?

Question

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.

I came across these questions, but they do not serve my needs:

CSS Input with width: 100% goes outside parent's bound
How to set the same width for HTML text input and drop down input
Can I stop 100% Width Text Boxes from extending beyond their containers?

Here are some reasons why:

• I cannot use block elements
• 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)
• No CSS3 (some users are still on IE6 and IE7)
• I cannot go wrapping every single input on our company website with magical DIV elements.

I've discovered that the <!DOCTYPE> 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.

At any rate, here is a fiddle:

http://jsfiddle.net/pJkGB/2/

In case of rot, here's the HTML in that fiddle:

<input id="txtwoo" style="width:300px" type="text" />
<br />
<select id="cbowoo" style="width:300px">
</select>

Notice how the textbox is wider than the dropdown. I want the outer bounds 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.

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.

Answer 1

Try using:

input{
    box-sizing:border-box;
}

If you want to go nuts, you could even use the below to specifically zero-in on text boxes:

input[type=text]{
    box-sizing:border-box;
}

Have a look at this fiddle