Warum wird ::nach der Inhaltsanzeige für Eingabeelemente in HTML5 nicht angezeigt?

CSS-Pseudoelemente für Eingabefelder

In HTML5 kann das Hinzufügen visueller Hinweise zu Formulareingaben mithilfe von CSS-Pseudoelementen die Benutzererfahrung verbessern. Man könnte versuchen, die Pseudoelemente ::before und ::after für die Gestaltung zu verwenden, wie im folgenden Beispiel zu sehen ist:

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

Allerdings kann es bei der Anzeige von ::after-Inhalten für Eingabeelemente zu Schwierigkeiten kommen . Trotz der Verwendung von einfachen und doppelten Doppelpunkten, dem Entfernen von Pseudoklassen und dem Experimentieren mit verschiedenen Browsern bleibt der Inhalt unsichtbar.

Während ::after-Pseudoelemente nahtlos auf Elementen wie div, span, p und funktionieren q, dies ist für Eingabeelemente nicht der Fall. Dieses Verhalten ist auf eine grundlegende Eigenschaft dieser Elemente zurückzuführen: Ihnen fehlt der Inhalt des Dokumentbaums.

Die Rolle des Elementinhalts

Gemäß der CSS-Spezifikation (http:// www.w3.org/TR/CSS21/generate.html), ::after-Pseudoelemente erfordern explizit Elemente mit einem Dokumentbauminhalt, um ihren Inhalt darzustellen. Eingabeelemente, ähnlich wie img und br, enthalten keinen solchen Inhalt. Daher zeigen Browser konstruktionsbedingt keinen ::after-Inhalt für Eingabefelder an.

Das obige ist der detaillierte Inhalt vonWarum wird ::nach der Inhaltsanzeige für Eingabeelemente in HTML5 nicht angezeigt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!