向 <textarea> 添加伪元素

Question

我最近偶然发现了 this article，我决定尝试一下。

我创建了一个小型联系表单，所有 <input type="text"> 标签都正常显示，但我在使用 <textarea> 时遇到了问题。

我想要的是文本区域比输入框大，我通过添加

.yoko-textarea::before{
    height:23em;
}}

问题是，当您在其中键入内容并单击其他地方时，该框会消失。我希望它保持可见，例如 input type="text"> 标签。

由于我只添加了相关代码，格式已损坏。您可以在底部找到<textarea>。

如果有人能帮助我解决这个问题，我将不胜感激。

Answer 1

问题出在您的 document.querySelectorAll 您只选择了 intput 和 class input__field 类型的所有元素。您还必须在其中包含类型 textarea。

替换为：

[].slice.call( document.querySelectorAll( 'input.input__field' ) ).forEach( function( inputEl )

与：

[].slice.call( document.querySelectorAll( 'input.input__field,textarea.input__field' ) ).forEach( function( inputEl )

Adding psuedo elements to <textarea>