Question

I have a textarea, which stretches (makes height bigger) smoothly:

<style type="text/css">
textarea {
  height:20px;
  width:170px;
  transition-property: all 0.2s linear; /* PS: I don't want to write all prefixes in this question */
}
  textarea:focus {
  height:30px;
}
</style>
<div style="overflow:hidden;"><!--And some good styles-->
  <textarea style="resize:none;padding:10px;"></textarea>
</div>

So, in chrome <div> stretches smoothly (and <textarea> too, what I want), but in opera and firefox <textarea> stretches smoothly, but <div> doesn’t.

I tried to add transition to <div>, but without result..

Is there a solution of this? (PS: I have some ideas to solve it with javascript: just add class to <div> onfocus, but can I solve it without js?)

Answer 1

So, I did it: I just add class “active” to <div> on focus of textarea, and on blur: remove class “active” from <div>. All transformations doing by this class, like

div {
  height: 20px;
  transition: all 0.2s linear;
}
div textarea {
  height: 10px;
  transition: all 0.2s linear;
}
div.active textarea {
  height:30px;
}
div.active {
  height:40px
}

It works very well.