::before 选择器可以与 <textarea> 一起使用吗？答案

【问题标题】：Can a ::before selector be used with a <textarea>?::before 选择器可以与 <textarea> 一起使用吗？
【发布时间】：2011-03-18 06:01:02
【问题描述】：

我正在<textarea>s 上尝试一些样式，并尝试使用::before 和::after 选择器做一些事情，但我无法让它们工作。所以问题是：这可能吗？我知道围绕表单的 CSS 是难以言喻的，但似乎这应该可行。

【问题讨论】：

您的意思是:before 和:after？而且，它们在这里工作得很好；你想达到什么目的？您是否遇到了特定于浏览器的问题？
是的，这就是我的意思。而且我认为它不是特定于浏览器的。我从nicolasgallagher.com/demo/pure-css-speech-bubbles/bubbles.html 那里得到了一些想法，一切都与您的标准块级元素一起工作，但在应用于 textarea 时却不行。
在 Chrome 和 Firefox 中不适合我。 textarea::after{ content: "some text" } 不起作用，但 form::after{ content: "some text" } 起作用。请注意，双冒号样式是 CSS3 语法，而单冒号是 CSS2 语法。两者都不适用于 textarea。
看来 Opera（我使用的浏览器）是个奇怪的人，因为它使用 textarea 的 :after 内容。我在 CSS2 规范中看到的关于这个问题的所有内容是“注意。该规范没有完全定义 :before 和 :after 与替换元素的交互（例如 HTML 中的 IMG）。这将在未来更详细地定义规格。”换句话说，这可能是实现定义的行为。

标签： html css forms css-selectors pseudo-element

【解决方案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 可以包含“内容”，但只能包含纯文本内容。

【讨论】：

谢谢你，一直在寻找为什么 :before 和 :after 不适用于 img 标签！

【解决方案2】：

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

在 textarea 和之前使用它

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

在 textarea 之后使用此代码。并在 psedu 元素之前和之后添加。

【讨论】：

当添加一个已被接受的十年前问题的答案时，重要的是要指出您正在解决的问题的新方面。对于可能在这 10 年内发生变化的技术，同样重要的是要注意这些变化是否会改变答案。

【解决方案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">

【讨论】：