a :: before选择器可以与<textarea>？</textarea>一起使用

Question

我在<textarea>上尝试了一些样式，我尝试用::before和::after选择器做一些事情，我无法做任何事情让它们起作用。所以问题是：这可能吗？我知道CSS周围的形式是神秘的，但这似乎应该有用。

Answer 1

:before和:after不适用于text-area（也不适用于任何不能包含其他元素的元素，例如img或input），因为伪元素的生成内容被放置在 元素内，而放在之后或放在元素的内容之后，并将其自身作为元素。伪元素不会放在父元素本身之前或之后（与互联网上可能找到的某些信息相反）。举例说明：

如果你有这个css：

p:before {content: 'before--'}
p:after {content: '--after'}

那么html就像这样：

<p>Original Content</p>

有效地渲染到屏幕，就好像源代码：

<p>before--Original Content--after</p>

不 ，好像源代码是：

before--<p>Original Content</p>--after

这就是为什么不能包含任何 html 元素“内容”的标签（如上所述）不能识别伪元素，因为没有“地方”可以生成该内容至。 textarea可以包含“内容”，但只包含纯文本内容。

Answer 2

<div class='tx-div-before'></div>

在文本区域和

之前使用它

<div class='tx-div-after'></div> 

在文本区域后使用此代码。并在psedu元素之前和之后添加。

Answer 3

实际上，您可以在输入元素上添加:after的内容。当元素处于活动状态时，这将添加一种提示：

#gallery_name {
   position:relative;
}
#gallery_name:focus:after {
   content: "Max Characters: 30";
   color: #FFF;
   position: absolute;
   right: -150px;
   top:0px;
}

<input id="gallery_name" type="text" name="gallery_name" placeholder="Gallery Name">