仿微信输入框静态

最近一个项目要采用微信输入框的样式，想了一下，弄了几个小Demo，如下：

只有下划线的文本框：/n
<input style="border:0;border-bottom:1 solid black;background:;">/n

自动向下廷伸的文本框：/n
<textarea name="content" rows="6" cols="80" onpropertychange="if(this.scrollHeight>80) this.style.posHeight=this.scrollHeight+5">输入几个回车试试</textarea>

自动横向廷伸的输入框：/n
<input type="text" style="huerreson:ex pression(this.width=this.scrollWidth)" value="abcdefghijk">

但是以上方法做出的效果都不能百分百还原微信的输入框，上网查了一下终于解决了这个问题，直接上代码：

html部分：

 <div class="qwe" contenteditable="true"></div>

css部分：

.qwe{
width: 200px;
height: auto;
max-height: 200px;
background-color: #CCCCCC;
overflow-y: scroll;
}

总的来说，只要在block元素上加上 contenteditable="true"这条属性就可以实现效果