很早以前就看过ytzong的《宽度自适应的输入框》这篇文章，感觉很不错，非常详实，YUI的栅格决定宽度，内容决定高度确实很实用。

个人认为ytzong的这个方法有两点非常麻烦：

• <b><b><input type=”text”></b></b>需要套2层b标签；
• 公式：.fluid-input-inner{padding-right:输入框左边框 + 输入框右边框 + 输入框左padding + 输入框右padding}也很麻烦经常忘记。

前段时间在一个项目中真好用到，同事啄米鸟模拟了一个宽度自适应的输入框，原理和ytzong的大致相同，但是解决了以上两个麻烦点。当然也有不足的地方。

看代码：
[code=”html”]
< !DOCTYPE HTML>

模拟宽度自适应的输入框

[/code]
可以发现一个非常讨厌的地方就是：

• textarea 和 input 文本输入框的边框是用套在其外层的容器的border来模拟的，textarea 和 input 文本输入框的本身边框 border:0 none。这样webkit下输入框focus后，输入框的边框在模拟的边框里面，体验上有点不爽。
• 还有一点非常值得注意的是：textarea的padding和margin一定要重置为0，否则在webkit和opera下会有细小的bug。

查看demo：https://www.html.cn/demo/input-textarea-adaptive/