单击时更改textarea高度

Question

我已经定义了textarea高度,按钮设置为none.我想更改textarea高度(到固定高度)并显示按钮,如果我在textaea内部单击.

HTML:

<div class="wrap">
    <textarea class="ta"></textarea>
    <div class="clear"></div>
    <button>OK</button>
</div>

CSS:

textarea{
    height:15px; 
    width: 200px;
}

.clear{
    clear:both;
}

button{
    display:none;
}

正如您所看到的,textarea的高度为15px.所以,一旦我点击它,我想将高度更改为100px,并且还想显示按钮.

你可以在这里看到jsfiddle中的相同代码.感谢您的任何帮助.

Answer 1

@ user966585; 看这个例子pure css:

textarea{height: 15px; width: 200px;}
textarea:focus{height:100px;}
textarea:focus ~ button{display:block}
.clear{clear:both;}
button{display:none;}