web-dev-qa-db-ja.com

:: beforeセレクターを<textarea>で使用できますか?

私は<textarea>sでいくつかのスタイルを試しているところですが、::beforeおよび::afterセレクターを使っていくつかのことを試してみましたが、それらを機能させるために何もできませんでした。だから問題は:これは可能ですか?フォームを囲むCSSは言うまでもありませんが、これでうまくいくようです。

43
xj9

:before:afterは、text-areaimginputなどの別の要素を含むことができない要素)では機能しません。疑似要素の生成されたコンテンツは配置されますwithin要素ですが、beforeまたはafterその要素のコンテンツであり、それ自体が要素として機能します。疑似要素は、親要素自体の前または後に配置されません(インターネットで見つけられるいくつかの情報とは異なります)。説明する:

このCSSがある場合:

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

次に、このようなhtml:

<p>Original Content</p>

効果的に画面に表示されますソースコードのようには、

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

Notソースコードのようには次のとおりです。

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

html要素「コンテンツ」を含むことができないタグ(上記のものと同様)は、生成されるコンテンツの「場所」がないため、疑似要素を認識しません。 textareaには「コンテンツ」を含めることができますが、純粋なテキストコンテンツのみを含めることができます。

85
ScottS