:afterフィールドで CSS 疑似要素を使用しようとしていますinputが、機能しません。 と一緒に使用するとspan、正常に機能します。
<style type="text/css">
.mystyle:after {content:url(smiley.gif);}
.mystyle {color:red;}
</style>
これは機能します (「buu!」の後と「some more」の前にスマイリーを配置します)
<span class="mystyle">buuu!</span>a some more
これは機能しません。someValue が赤色になるだけで、スマイリーは表示されません。
<input class="mystyle" type="text" value="someValue">
何が間違っているのでしょうか? 別の疑似セレクターを使うべきでしょうか?
注:はサードパーティのコントロールによって生成されているため、spanの周囲にを追加できません。input
ベストアンサー1
:before:afterコンテナ内でレンダリングする
<input> には他の要素を含めることはできません。
疑似要素は、コンテナ要素でのみ定義できます (または、サポートされています)。疑似要素は、コンテナ自体の中でinput子要素としてレンダリングされるためです。他の要素を含めることはできないため、サポートされていません。button一方、フォーム要素でもある A は、他のサブ要素のコンテナであるため、疑似要素をサポートします。
私に言わせれば、一部のブラウザがコンテナ以外の要素にこれら 2 つの疑似要素を表示する場合、それはバグであり、非標準準拠です。仕様では要素のコンテンツについて直接説明しています...
W3C仕様
注意深く読むと仕様実際には、それらは包含要素内に挿入されると言われています。
作成者は、:before および :after 疑似要素を使用して、生成されるコンテンツのスタイルと場所を指定します。名前が示すように、:before および :after 疑似要素は、要素のドキュメント ツリー コンテンツの前後のコンテンツの場所を指定します。これらの疑似要素と組み合わせて 'content' プロパティを使用すると、挿入される内容を指定できます。
わかりますか?要素のドキュメント ツリーコンテンツです。私の理解では、これはコンテナー内を意味します。