HTML5 の入力要素のコンテンツ表示が ::after にならないのはなぜですか?

入力フィールドの CSS 擬似要素

HTML5 では、CSS 擬似要素を使用してフォーム入力に視覚的なキューを追加すると、ユーザー エクスペリエンスを向上させることができます。次の例に示すように、スタイル設定に ::before および ::after 擬似要素を使用しようとする場合があります。

<code class="css">input::after         { display: inline; }
input:valid::after   { content: ' ✓ '; color: #ddf0dd; }
input:invalid::after { content: ' ✗ '; color: #f0dddd; }</code>

ただし、入力要素の ::after コンテンツを表示する際に問題が発生する可能性があります。 。単一コロンと二重コロンの両方を使用し、疑似クラスを削除し、さまざまなブラウザを試したにもかかわらず、コンテンツは表示されないままです。

一方、::after 疑似要素は、div、span、p、およびq、これは入力要素には当てはまりません。この動作は、これらの要素の基本的な属性に起因します。つまり、ドキュメント ツリーのコンテンツが欠如しています。

要素コンテンツの役割

CSS 仕様 (http:// www.w3.org/TR/CSS21/generate.html)、::after 擬似要素では、コンテンツをレンダリングするためにドキュメント ツリー コンテンツを持つ要素が明示的に必要です。 img や br と同様、入力要素にはそのようなコンテンツは含まれません。したがって、仕様により、ブラウザーは入力フィールドの ::after コンテンツを表示しません。

以上がHTML5 の入力要素のコンテンツ表示が ::after にならないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。