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

问题描述

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

I'm experimenting with some styles on <textarea>s and I tried doing some stuff with ::before and ::after selectors and I couldn't to anything to get them to work. So the question is: is this possible? I know the CSS surrounding forms is arcane beyond mention but it seems like this should work.

推荐答案

:before 和 :after 不能在 text-area(也不是任何不能包含其他元素的元素，例如 img 或 input)，因为伪元素的生成内容被放置在 within 元素，但 before 或 after 该元素的内容，并将其自身作为一个元素.伪元素不会放置在父元素本身之前或之后(与互联网上可能找到的一些信息相反).举例说明:

The :before and :after will not work on a text-area (nor any element that cannot contain another element, such as img or input), because the generated content of the pseudo-element gets placed within the element but before or after that element's content, and acts itself as an element. The pseudo-element does not get placed before or after the parent element itself (contrary to some information one may find on the internet). To illustrate:

如果你有这个 css:

If you have this css:

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

然后html是这样的:

Then html like this:

<p>Original Content</p>

有效地呈现在屏幕上就好像源代码是:

Effectively renders to the screen as if the source code were:

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

不是 好像源代码是:

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

这就是为什么不能包含任何 html 元素内容"(如上面提到的那些)的标签无法识别伪元素的原因，因为没有生成该内容的位置"到.textarea 可以包含内容"，但只能包含纯文本内容.

Which is why tags that cannot contain any html element "content" (like those mentioned above) do not recognize the pseudo-elements, as there is no "place" for that content to be generated to. The textarea can contain "content," but only pure text content.

这篇关于::before 选择器可以与 <textarea> 一起使用吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！