Kann ich ein: before oder: after Pseudoelement in einem Eingabefeld verwenden?

:before und :after werden in einem Container gerendert

und <input> darf keine anderen Elemente enthalten.

Pseudoelemente können nur für Containerelemente definiert werden (oder besser gesagt nur unterstützt werden). Weil sie gerendert werden, ist in der Container selbst als untergeordnetes Element. input darf keine anderen Elemente enthalten, daher werden sie nicht unterstützt. Eine button, die ebenfalls ein Formularelement ist, unterstützt sie, da es sich um einen Container mit anderen Unterelementen handelt.

Wenn Sie mich fragen, ob ein Browser do diese beiden Pseudoelemente auf Nicht-Container-Elementen anzeigt, ist dies ein Fehler und eine Nicht-Standard-Konformität. Spezifikation spricht direkt über Elementinhalt ...

W3C-Spezifikation

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

Autoren geben den Stil und den Speicherort des generierten Inhalts mit den Pseudoelementen: vor und nach an. Wie die Namen anzeigen, geben die Pseudoelemente: before und: after die Position des Inhalts vor und nach dem Inhalt der Dokumentstruktur des Elements an. Die Eigenschaft 'content' gibt in Verbindung mit diesen Pseudoelementen an, was eingefügt wird.

Sehen? Dokumentbaum eines Elements content. Soweit ich es verstehe, bedeutet dies in einen Container.

Seltsamerweise funktioniert es mit einigen Eingabearten. Zumindest in Chrome, 

<input type="checkbox" />

funktioniert gut, genau wie

<input type="radio" />

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

:before und :after werden innerhalb eines Containers angewendet. Dies bedeutet, dass Sie sie für Elemente mit einem Endtag verwenden können. 

Es gilt nicht für selbstschließende Elemente.

Nebenbei bemerkt werden Elemente, die sich selbst schließen (wie img/hr/input), auch als "Ersetzte Elemente" bezeichnet, da sie durch ihren jeweiligen Inhalt ersetzt werden. "Externe Objekte" für das Fehlen eines besseren Begriffs. Eine bessere Lektüre hier

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

.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, da er .ng-invalid-Klassenelemente automatisch zu <input>-Formularelementen und nicht zum <label>-Formular, sondern zum Formular hinzufügt.

Ich habe mit dem background-image den roten Punkt für die erforderlichen Felder erstellt.

input[type="text"][required] {
  background-image: radial-gradient(red 15%, transparent 16%);
  background-size: 1em 1em;
  background-position: top right;
  background-repeat: no-repeat
}

Blick auf Codepen

Sie können kein Pseudo-Element in ein Eingabeelement einfügen, sondern ein Schattenelement wie einen Platzhalter einfügen!

input[type="text"] {   
  &::-webkit-input-placeholder {
    &:before {
      // your code
    }
  }
}

Damit es auch in anderen Browsern funktioniert, verwenden Sie :-moz-placeholder, ::-moz-placeholder und :-ms-input-placeholderin verschiedenen Selektoren. Die Selektoren können nicht gruppiert werden, da der Selektor die gesamte Anweisung ungültig macht, wenn ein Browser sie nicht erkennt.

UPDATE: Der obige Code funktioniert nur mit CSS-Vorprozessor (SASS, LESS ...), ohne Vorverarbeiter:

input[type="text"]::-webkit-input-placeholder:before { // your code }

Ich fand diesen Beitrag, da ich das gleiche Problem hatte, dies war die Lösung, die für mich funktionierte. Statt den Wert der Eingabe zu ersetzen, entfernen Sie ihn einfach und positionieren Sie eine Spannweite dahinter, die dieselbe Größe hat. In der Spannweite kann eine :before-Pseudoklasse mit der Symbol-Schriftart Ihrer Wahl angewendet werden.

<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>

Pseudoelemente wie :after, :before gelten nur für Containerelemente. Elemente, die an einer Stelle beginnen und schließen, wie <input/>, <img> usw., sind keine Containerelemente. Daher werden Pseudoelemente nicht unterstützt. Sobald Sie ein Pseudoelement auf ein Containerelement wie <div> anwenden und wenn Sie den Code untersuchen (siehe Abbildung), können Sie verstehen, was ich meine. Tatsächlich wird das Pseudoelement innerhalb des Containerelements erstellt. Dies ist bei <input> oder <img> nicht möglich

Eine funktionierende Lösung in reinem CSS:

Der Trick besteht darin, anzunehmen, dass sich hinter dem Textfeld ein dom-Element befindet.

/*
 * The trick is here:
 * this selector says "take the first dom element after
 * the input text (+) and set its before content to the
 * value (:before).
 */
input#myTextField + *:before {
  content: "????";
} 

<input id="myTextField" class="mystyle" type="text" value="someValue" />
<!--
  There's maybe something after a input-text
  Does'nt matter what it is (*), I use it.
  -->
<span></span>

(*) Begrenzte Lösung jedoch: 

• sie müssen hoffen, dass es ein folgendes dom-Element gibt,
• sie müssen hoffen, dass kein anderes Eingabefeld auf Ihr Eingabefeld folgt.

In den meisten Fällen kennen wir unseren Code, sodass diese Lösung effizient erscheint und 100% CSS und 0% jQuery enthält.

Gemäß einem note in der CSS 2.1-Spezifikation definiert die Spezifikation „die Wechselwirkung von Vorher und Nachher mit ersetzten Elementen (z. B. IMG in HTML) nicht vollständig. Dies wird in einer zukünftigen Spezifikation genauer definiert. ”Obwohl input nicht mehr wirklich ein ersetztes Element ist, hat sich die Grundsituation nicht geändert: Die Auswirkung von :before und :after auf das Element ist nicht festgelegt 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 angehen wollen. Das Generieren von generiertem Inhalt in ein Texteingabesteuerelement wäre sehr irreführend: Für den Benutzer scheint es ein Teil des Anfangswerts im Steuerelement zu sein, er kann jedoch nicht geändert werden - er scheint also zu Beginn des Steuerelements etwas Erzwungenes zu sein Kontrolle, aber es wird nicht als Teil der Formulardaten übermittelt.

Wie bereits erläutert, sind inputs irgendwie abgelöste leere Elemente, sodass die meisten Browser weder ::before noch ::after Pseudoelemente in ihnen generieren können.

Die CSS-Arbeitsgruppe erwägt jedoch, ::before und ::after explizit zuzulassen, falls die inputappearance: none hat.

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

Safari und Chrome lassen in ihren Formulareingaben Pseudoelemente zu. Andere Browser tun dies nicht. Wir haben versucht, das zu entfernen, aber die Der use-counter zeichnet ~ .07% der Seiten auf, die ihn verwenden, was 20x unser Maximum ist Entfernungsschwelle.

Die Angabe von Pseudoelementen für Eingaben würde die Angabe von .__ erfordern. die interne Struktur der Eingaben zumindest etwas, was wir nicht haben noch geschafft (und ich bin nicht zuversichtlich, dass wir * können *). Aber Boris vorgeschlagen, in einem der Threads, so dass es beim Erscheinen erscheint: none Eingaben - im Grunde werden sie einfach in <div> s umgewandelt, statt in "irgendwie ersetzte" Elemente.

versuchen Sie es als nächstes:

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>

Sie müssen eine Art Wrapper für die Eingabe verwenden, um ein Pseudoelement Vorher oder Nachher verwenden zu können. Hier ist eine Geige, die ein Vorher auf dem Wrapper div einer Eingabe hat und dann die Vorher in die Eingabe einfügt - oder zumindest sieht es so aus. Offensichtlich ist dies eine Umgehung, die aber effektiv ist und sich als reaktionsschnell erweist. Sie können dies leicht nachträglich machen, wenn Sie andere Inhalte einfügen möchten.

Arbeiten Fiddle

Dollarzeichen in einer Eingabe als Pseudoelement: http://jsfiddle.net/kapunahele/ose4r8uj/1/

Das HTML:

<div class="test">
    <input type="text"></input>
</div>

Das CSS:

input {
    margin: 3em;
    padding-left: 2em;
    padding-top: 1em;
    padding-bottom: 1em;
    width:20%; 
}


.test {
    position: relative;
    background-color: #dedede;
    display: inline;
}

.test:before {
    content: '$';
    position: absolute;
    top: 0;
    left: 40px;
    z-index: 1;
}

Wenn Sie versuchen, ein Eingabeelement mit: vorher und: nachher zu formatieren, versuchen Sie wahrscheinlich, die Auswirkungen anderer span-, div- oder sogar eines Elements in Ihrem CSS-Stapel nachzuahmen.

Robert Koritniks Antwort lautet: Vorher und Nachher kann nur auf Containerelemente angewendet werden, und Eingabeelemente sind keine Container.

In HTML 5 wurde jedoch das Element button eingeführt, das ein Container ist und sich wie ein Eingabeelement [type = "submit | reset"] verhält.

    <style>
    .happy:after { content:url(smiley.gif); }
    </style>

    <form>
    <!-- won't work -->
    <input class="happy" type="submit" value="Submit" />

    <!-- works -->
    <button class="happy">Submit</button>
    </form>

:before und :after funktionieren nur für Knoten, die über untergeordnete Knoten verfügen können, da sie einen neuen Knoten als ersten oder letzten Knoten einfügen.

Zusammenfassung

Es funktioniert nicht mit <input type="button">, aber es funktioniert gut mit <input type="checkbox">.

Fiddle: http://jsfiddle.net/gb2wY/50/

HTML:

<p class="submit">
    <input id="submit-button" type="submit" value="Post">
    <br><br>
    <input id="submit-cb" type="checkbox" checked>
</p>

CSS:

#submit-button::before,
#submit-cb::before {
    content: ' ';
    background: transparent;
    border: 3px solid crimson;
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: -3px -3px;
}

Ich habe festgestellt, dass Sie es so machen können:

.submit .btn input
{
   padding:11px 28px 12px 14px;
   background:#004990;
   border:none;
    color:#fff;
}

 .submit .btn
 {
     border:none;
     color:#fff;
     font-family: 'Open Sans', sans-serif;
     font-size:1em;
     min-width:96px;
     display:inline-block;
     position:relative;
 }

.submit .btn:after
{
    content:">";
    width:6px;
    height:17px;
    position:absolute;
    right:36px;
    color:#fff;
    top:7px;
}

<div class="submit">
  <div class="btn">
     <input value="Send" type="submit" />
  </div>
</div>

Sie müssen über ein div-übergeordnetes Element verfügen, das die Auffüllung übernimmt und: after . Das erste übergeordnete Element muss relativ sein und das zweite div muss absolut sein, damit Sie die Position des after-Elements festlegen können.

Das größte Missverständnis ist hier die Bedeutung der Wörter before und after. Sie beziehen sich nicht auf das Element selbst, aber auf das content im Element. element:before steht also vor dem Inhalt und element:after steht hinter dem Inhalt, beide befinden sich jedoch noch im ursprünglichen Element.

Das input-Element hat keinen Inhalt in der CSS-Ansicht und daher keinen :before- oder :after-Pseudo-Inhalt. Dies gilt für viele andere leere oder ersetzte Elemente.

Es gibt kein Pseudoelement, das auf outside das Element verweist.

In einem anderen Universum wurden diese Pseudoelemente möglicherweise als etwas anderes bezeichnet, um diesen Unterschied klarer zu machen. Und jemand könnte sogar ein Pseudoelement vorgeschlagen haben, das sich wirklich außerhalb des Elements befindet. Dies ist in diesem Universum bisher nicht der Fall.

Sie können after oder before Element in Ihrem übergeordneten Block mit jQuery . Wie folgt verwenden:

$(yourInput).parent().addClass("error-form-field");