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
<![CDATA[
<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>
]]>