a :: before选择器可以与< textarea&gt ;?一起使用吗？ [英] Can a ::before selector be used with a <textarea>?

问题描述

我正在尝试在< textarea> 上的一些样式，我试着用 :: before 和 :: after 选择器，我不能任何东西让他们工作。所以问题是：这是可能吗？

解决方案

：和之后的 c：>之前 c>不能包含另一个元素，例如 img 或 input ），因为伪元素的生成内容在之内，但在之前或之后，并且自己作为一个元素。伪元素不会放置在父元素本身之前或之后（与可能在互联网上找到的一些信息相反）。要说明：

如果您有此css：

  p： before {content：'before--'} 
p：after {content：'--after'}之后
  

$ b b

然后html就像这样：

 < p>原始内容< / p& 
 

有效地呈现到屏幕，如同源代码： p>



 < p> before  - 原始内容 - 之后< / p& 
     源代码分别是：
 之前 - < p>原始内容< / p& $ b  
这是为什么标签不能包含任何 html 元素content如上所述）不识别伪元素，因为对于要生成的内容没有地方。  textarea 可以包含内容，但只能包含纯文本内容。
 
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.
解决方案
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:

If you have this css:
p:before {content: 'before--'}
p:after {content: '--after'}
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>
Not as if the source code were:
before--<p>Original Content</p>--after
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.

                        
这篇关于a :: before选择器可以与&lt; textarea&gt ;?一起使用吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！