Question

This is a simplified version of my question earlier today since I didn’t get a satisfactory reply.

I have a HTML and CSS code as in this Fiddle: http://jsfiddle.net/wNGHz/

How can I make the <input> resize automatically when its parent frame is resized?

Notes:

• I prefer to use only CSS rather than JavaScript.
• The <input> should have 100px distance from left and right edges of the parent.

Answer 1

@thirtydot semantically I want to have a simpler HTML. I can wrap
<input> with <div> but it’s just weird to add one more element for the
sole purpose of styling another one. I was wondering if anyone has a
better solution.

Unfortunately, there is no better way. It has to do with the fact that input is a replaced element, which means it behaves differently to non-replaced elements such as div.

One difference is that position: absolute; left: 0; right: 0 won’t work in the same way on an input as it does on div (except in WebKit).

The best workaround is to wrap the input in a div:

http://jsfiddle.net/thirtydot/wNGHz/6/

<div class="inputContainer">
    <input type="text" value="test" />
</div>

.inputContainer {
    position: absolute;
    left: 50px;
    right: 50px;
}
input {
    width: 100%;
    background-color: red;
    color: white;
    border: none;
}

When you have input { width: 100%; }, it’s usually a good idea to also add box-sizing: border-box, to make any padding and border on the input be counted inside the width: 100%: http://jsfiddle.net/thirtydot/wNGHz/7/