Flex input box layout

The textbox should flex depending on the width of the text before it and the button after it.

you may adjust browser's text-size or resize this window to see how it work.

Hedger Wang

Examples :

Example : With fancy style / elements

Example : HTML/CSS

<div class="foo"> <label>label</label> <span class="s"><button type="submit" >button</button></span> <span class="t"><input type="text" /></span> </div> <style> .foo{ width:80%; overflow:hidden; font-size:small; } .foo label{ float:left; margin:0.3em 1em 0 0; display:inline; font:1em/normal "Tahoma"; } .foo .s{ float:right; display:inline; height:1.7em; margin:0 0 0 3px; } .foo .s button{ height:100%; display:block; padding:0 12px; cursor:pointer; } .foo .t{ display:block; position:relative; overflow:hidden; height:1.6em; background:#fff; border:solid 1px #222; border-right-color:#aaa; border-bottom-color:#aaa; } .foo .t input{ display:block; width:100%; height:100%; position:absolute; border:none; background:transparent; top:0; left:0; } </style>