::before 選擇器可以與<textarea> ?

Question

我在<textarea>上嘗試了一些樣式，我嘗試用::before和::after選擇器做一些事情，但我無法讓它們工作。 所以問題是：這可能嗎？ 我知道圍繞表單的 CSS 是難以言喻的，但似乎這應該可行。

Answer 1

:before和:after不適用於text-area （也不能包含任何不能包含另一個元素的元素，例如img或input ），因為偽元素的生成內容被放置在元素內但之前或之后元素的內容，並將其自身作為一個元素。 偽元素不會放置在父元素本身之前或之后（與可能在 Internet 上找到的某些信息相反）。 為了顯示：

如果你有這個 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>

在 textarea 和

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

在 textarea 之后使用此代碼。 並在 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">