::before 选择器可以与 <textarea> 一起使用吗? [英] Can a ::before selector be used with a <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-areacode>(也不是不能包含其他元素的任何元素，例如 img 或 input)，因为伪元素的生成内容被放置在 内 元素，但before 或 after 元素的内容，并将其自身作为一个元素.伪元素不会放置在父元素本身之前或之后(与可能在 Internet 上找到的某些信息相反).举例说明:
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> 一起使用吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
