Yui Page Layout: Adaptive width of the input box

Yui has a layout idea: Grid decision width, content decision height, today discusses the adaptive width of the input box, the first code:

<! DOCTYPE html>
 
To put it simply, the principle:
 
In order to have a better experience, input[type= ' text ' and textarea generally have border values and padding values (despise certain padding set to 0 drops), using the following formula:
 
. fluid-input-inner{padding-right: Input box left box + input box right border + input box left padding + input box right padding}
 
Allow the input box to inherit the width of Fluid-input-inner can be adaptive, and IE6 has a width beyond the automatic distraction of the bug, so more than one layer of fluid-input, width 100%, overflow hidden can.
 
Col width is arbitrary, in the width of the adaptive layout default for auto, here convenient demo set width.
 
This is explained from the inside out, but the name is from the outside.
 
Further
 
Focus when border into 4px?
 
Good question (in fact, I am asking), the input box focus after adding class= "Focus", that becomes:
 
<textarea class= "Focus" ></textarea>
 
Css:
 
. focus{position:relative;left:-2px;border-width:4px!important;}
 
———————— the villagers ' questions and answers divider line ————————-
 
Beauty @jeannewoo Feedback a bug,ie6 under the textarea input text when they open their own (last night on the road @ivane also told me, but I did not take the matter, hey ~), I tried to do so, The solution is simple: Trigger the Fluid-input-inner haslayout.