How can I fix the textarea border bottom css effect?

Question

I have a simple border bottom animation with another element and it works fine on simple input element but it's not work properly on a textarea. (If I should use javaScript then please advise a solution)

How can I fix the height of textarea?

 *{ box-sizing: border-box; }.container { position: relative; } textarea, input { border: none; border-bottom: 3px solid #e6e6e6; width: 100%; height: 50px; resize: none; }.anim-bar { position: absolute; bottom: 0; left: 0; height: 3px; width: 0%; background-color: blue; -webkit-transition: width.3s; transition: width.3s; } textarea:focus +.anim-bar, input:focus +.anim-bar { width: 100%; }

 <h1>Works fine on input:)</h1> <div class="container"> <input type="text"> <span class="anim-bar"></span> </div> <h1>Cross the container box- textarea:( </h1> <div class="container"> <textarea></textarea> <span class="anim-bar"></span> </div>

Answer 1

this issue not show on all browsers. in my browsers chrome(window) is obvious.

the line is under textarea.

======================================================

I think is baseline is different.

Baseline inconsistency

The HTML specification doesn't define where the baseline of a is, so different browsers set it to different positions. For Gecko, the baseline is set on the baseline of the first line of the textarea's first line, on another browser it may be set on the bottom of the box. Don't use vertical-align: baseline on it; the behavior is unpredictable.

reference:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea

 * { box-sizing: border-box; }.container { position: relative; } textarea, input { border: none; border-bottom: 3px solid #e6e6e6; width: 100%; height: 50px; resize: vertical; /* see this */ vertical-align: middle; }.anim-bar { position: absolute; bottom: 0; left: 0; height: 3px; width: 0%; background-color: blue; -webkit-transition: width.3s; transition: width.3s; } textarea:focus+.anim-bar, input:focus+.anim-bar { width: 100%; }

 <h1>Works fine on input:)</h1> <div class="container"> <input type="text"> <span class="anim-bar"></span> </div> <h1>Error on textarea:( </h1> <div class="container"> <textarea></textarea> <span class="anim-bar"></span> </div>

==================================================

Answer 2

Adding CSS styling to the textarea resize: none; will stop the textarea from being adjustable.

I added the styling to the CSS area and inline the HTML to show both ways it can be done.

 * { box-sizing: border-box; }.container { position: relative; } textarea { resize:none; //adding styling in css file } textarea, input { border: none; border-bottom: 3px solid #e6e6e6; width: 100%; height: 50px; resize: vertical; }.anim-bar { position: absolute; bottom: 0; left: 0; height: 3px; width: 0%; background-color: blue; -webkit-transition: width.3s; transition: width.3s; } textarea:focus+.anim-bar, input:focus+.anim-bar { width: 100%; }

 <h1>Works fine on input:)</h1> <div class="container"> <input type="text"> <span class="anim-bar"></span> </div> <h1>Error on textarea:( </h1> <div class="container"> <textarea style="resize:none;"></textarea> <!--Adding CSS styling inline--> <span class="anim-bar"></span> </div>