Kann ich ein :before- oder :after-Pseudo-Element für ein Eingabefeld verwenden?

Question

Ich versuche, die :after CSS-Pseudo-Element auf einer input Feld, aber es funktioniert nicht. Wenn ich es mit einem span funktioniert es gut.

<style type="text/css">
.mystyle:after {content:url(smiley.gif);}
.mystyle {color:red;}
</style>

Das funktioniert (setzt den Smiley nach "buu!" und vor "some more")

<span class="mystyle">buuu!</span>a some more

Das funktioniert nicht - es färbt nur someValue rot, aber es gibt keinen Smiley.

<input class="mystyle" type="text" value="someValue">

Was mache ich falsch? Sollte ich einen anderen Pseudo-Selektor verwenden?

Hinweis: Ich kann keine span um mein input weil sie von einem fremden Steuerelement erzeugt wird.

Answer 1

:before y :after Rendering innerhalb eines Containers

und <input> können keine anderen Elemente enthalten.

---

Pseudo-Elemente können nur auf Containerelementen definiert werden (oder besser gesagt, sie werden nur unterstützt). Denn die Art, wie sie gerendert werden, ist innerhalb der Container selbst als untergeordnetes Element. input können keine anderen Elemente enthalten und werden daher nicht unterstützt. A button auf der anderen Seite, das auch ein Formularelement ist, unterstützt sie, weil es ein Container für andere Unterelemente ist.

Wenn Sie mich fragen, ob ein Browser tut diese beiden Pseudo-Elemente auf Nicht-Container-Elementen anzeigen, ist dies ein Fehler und eine Nicht-Standardkonformität. Die Spezifikation spricht direkt über Elementinhalte...

W3C-Spezifikation

Wenn wir sorgfältig lesen die Spezifikation es heißt tatsächlich, dass sie eingefügt werden innerhalb ein enthaltendes Element:

Autoren spezifizieren den Stil und die Position des generierten Inhalts mit den :before und :after Pseudo-Elementen. Wie ihre Namen andeuten, geben die :before und :after Pseudo-Elemente die Position des Inhalts vor und nach dem Inhalt des Dokumentbaums eines Elements an. Die Eigenschaft "content" gibt in Verbindung mit diesen Pseudo-Elementen an, was eingefügt wird.

Sehen Sie? den Dokumentenbaum eines Elements Inhalt . Nach meinem Verständnis bedeutet dies innerhalb einen Behälter.

Answer 2

:after y :before werden im Internet Explorer 7 und darunter nicht unterstützt, und zwar auf keinem Element.

Es ist auch nicht dafür gedacht, auf ersetzten Elementen wie Formularelemente (Eingänge) und Bildelemente .

Mit anderen Worten ist es unmöglich mit reinem CSS.

Wenn Sie jedoch jquery können Sie

$(".mystyle").after("add your smiley here");

API-Dokumente auf .after

So fügen Sie Ihren Inhalt mit Javascript an. Dies funktioniert in allen Browsern.

Answer 3

Seltsamerweise funktioniert das bei einigen Arten von Eingaben. Zumindest in Chrome,

<input type="checkbox" />

funktioniert gut, genauso wie

<input type="radio" />

Es ist nur type=text und einige andere, die nicht funktionieren.

Answer 4

Hier ein anderer Ansatz (vorausgesetzt, Sie haben die Kontrolle über den HTML-Code): Fügen Sie ein leeres <span></span> direkt nach der Eingabe, und zielen Sie in CSS mit input.mystyle + span:after

.field_with_errors {
  display: inline;
  color: red;
}
.field_with_errors input+span:after {
  content: "*"
}

<div class="field_with_errors">Label:</div>
<div class="field_with_errors">
  <input type="text" /><span></span> 
</div>

Ich verwende diesen Ansatz in AngularJS, weil er die .ng-invalid Klassen automatisch zu <input> Formularelemente und das Formular, aber nicht auf die <label> .

Answer 5

:before y :after werden innerhalb eines Containers angewandt, was bedeutet, dass Sie sie für Elemente mit einem End-Tag verwenden können.

Sie gilt nicht für selbstschließende Elemente.

Nebenbei bemerkt werden Elemente, die sich selbst schließen (wie z. B. img/hr/input), auch als "Ersetzte Elemente" bezeichnet, da sie durch ihren jeweiligen Inhalt ersetzt werden. In Ermangelung eines besseren Begriffs werden sie als "externe Objekte" bezeichnet. Besser lesen aquí