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

In der Frage ist von einem "Eingabefeld" die Rede. Ich glaube aber, dass der Fragesteller sich auf ein Eingabefeld mit type=text bezog, ::after y ::before Pseudocontent wird für mehrere verschiedene Arten von Eingabefeldern gerendert:

input::before {
    content: "My content" /* 11 different input types will render this */
}    

Hier ist ein umfassend Demo de todo Eingabetypen, wobei deutlich wird, welche Typen mit (in diesem Fall) der ::before Pseudoelement.

Zusammenfassend ist dies eine Liste aller Eingabetypen, die Pseudocontent wiedergeben können:

1. Ankreuzfeld
2. Farbe
3. Datum
4. datum-zeit-lokal
5. Datei
6. Bild
7. Monat
8. Radio
9. Bereich
10. Zeit
11. Woche

Answer 2

Ich habe diesen Beitrag gefunden, als ich das gleiche Problem hatte, und das war die Lösung, die bei mir funktioniert hat. Im Gegensatz zum Ersetzen der Eingabe der Wert nur entfernen Sie es und absolut Position eine Spanne dahinter, die die gleiche Größe ist, die Spanne kann ein haben :before Pseudoklasse mit der Icon-Schriftart Ihrer Wahl zugewiesen.

<style type="text/css">

form {position: relative; }
.mystyle:before {content:url(smiley.gif); width: 30px; height: 30px; position: absolute; }
.mystyle {color:red; width: 30px; height: 30px; z-index: 1; position: absolute; }
</style>

<form>
<input class="mystyle" type="text" value=""><span class="mystyle"></span>
</form>

Answer 3

Wie andere erklärt haben, input s sind irgendwie ersetzte leere Elemente, so dass die meisten Browser es nicht zulassen werden, dass Sie die ::before noch ::after Pseudo-Elemente in ihnen.

Die CSS-Arbeitsgruppe erwägt jedoch, ausdrücklich zuzulassen, dass ::before y ::after für den Fall, dass die input hat appearance: none .

De https://lists.w3.org/Archives/Public/www-style/2016Mar/0190.html ,

Safari und Chrome erlauben beide Pseudo-Elemente in ihren Formulareingaben. Bei anderen Browsern ist das nicht der Fall. Wir haben überlegt, dies zu entfernen, aber der Nutzungszähler zeigt ~.07% der Seiten an, die es verwenden, was dem 20-fachen unserer maximalen Schwelle für die Entfernung.

Die Angabe von Pseudo-Elementen an Eingängen würde die Angabe von die interne Struktur der Eingänge zumindest ein wenig zu spezifizieren, was wir noch nicht noch nicht geschafft haben (und ich bin nicht sicher, ob wir das tun *können*). Aber Boris suggested, in one of the bugthreads, allowing it on appearance:none inputs - basically just turning them into <div>s, rather than "Irgendwie-ersetzte" Elemente.

Answer 4

Nächster Versuch:

label[for="userName"] {
  position: relative;
}

label[for="userName"]::after {
  content: '[after]';
  width: 22px;
  height: 22px;
  display: inline-block;
  position: absolute;
  right: -30px;
}

<label for="userName">
    Name: 
    <input type="text" name="userName" id="userName">
    </label>

Answer 5

Laut einer Hinweis In der CSS 2.1-Spezifikation wird "die Interaktion von :before und :after mit ersetzten Elementen (wie IMG in HTML) nicht vollständig definiert. Dies wird in einer zukünftigen Spezifikation detaillierter definiert werden". Obwohl input nicht mehr wirklich ein ersetztes Element ist, hat sich an der grundlegenden Situation nichts geändert: Die Wirkung von :before y :after ist nicht spezifiziert und hat im Allgemeinen keine Auswirkungen.

Die Lösung besteht darin, einen anderen Ansatz für das Problem zu finden, das Sie auf diese Weise zu lösen versuchen. Die Einfügung von generiertem Inhalt in ein Texteingabe-Steuerelement wäre sehr irreführend: Für den Benutzer würde es so aussehen, als wäre es Teil des Anfangswertes im Steuerelement, aber es kann nicht geändert werden - es würde also so aussehen, als wäre es etwas, das am Anfang des Steuerelements erzwungen wird, aber dennoch würde es nicht als Teil der Formulardaten übermittelt werden.