如何修复 textarea 边框底部 css 效果？

Question

我有一个简单的边框底部 animation 和另一个元素，它在简单的输入元素上工作正常，但在文本区域上不能正常工作。 （如果我应该使用 javaScript 那么请提供解决方案）

如何修复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

此问题并非在所有浏览器上都显示。 在我的浏览器中 chrome(window) 很明显。

该行位于textarea下。

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

我认为基线是不同的。

基线不一致

HTML 规范没有定义 a 的基线在哪里，所以不同的浏览器将它设置到不同的位置。 对于 Gecko，基线设置在 textarea 第一行的第一行的基线上，在另一个浏览器上它可能设置在框的底部。 不要在其上使用垂直对齐：基线； 行为是不可预测的。

参考：

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

将 CSS 样式添加到textarea resize: none; 将阻止textarea可调整。

我将样式添加到 CSS 区域并内联 HTML 以显示可以完成的两种方式。

 * { 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>