Kann ich ein: vor oder: nach dem Pseudoelement in einem Eingabefeld verwenden?

Ich versuche, das :afterCSS-Pseudoelement für ein inputFeld zu verwenden, aber es funktioniert nicht. Wenn ich es mit a benutze span, funktioniert es OK.

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

Dies funktioniert (setzt den Smiley nach "buu!" Und vor "etwas mehr")

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

Dies funktioniert nicht - es färbt nur someValue in Rot, aber es gibt keinen Smiley.

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

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

Hinweis: Ich kann keine spanum meine herum hinzufügen input, da diese von einem Steuerelement eines Drittanbieters generiert wird.

:afterund :beforewerden in Internet Explorer 7 und darunter für keine Elemente unterstützt.

Es ist auch nicht für ersetzte Elemente wie Formularelemente (Eingaben) und Bildelemente vorgesehen .

Mit anderen Worten, mit reinem CSS ist das unmöglich .

Wenn Sie jedoch jquery verwenden , können Sie verwenden

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

API-Dokumente auf .after

Zum Anhängen Ihrer Inhalte mit Javascript. Dies funktioniert in allen Browsern.

:beforeund :afterin einem Container rendern

und <Eingabe> darf keine anderen Elemente enthalten.

Pseudoelemente können nur auf Containerelementen definiert werden (oder besser gesagt nur unterstützt werden). Weil die Art und Weise, wie sie gerendert werden, als untergeordnetes Element im Container selbst liegt. inputkann keine anderen Elemente enthalten, daher werden sie nicht unterstützt. Ein buttonFormularelement, das auch ein Formularelement ist, unterstützt sie, da es sich um einen Container mit anderen Unterelementen handelt.

Wenn Sie mich fragen, ob einige Browser tut diese beiden Pseudo-Elemente auf Nicht-Container - Elemente angezeigt werden , ist es ein Fehler und ein Nicht-Standard - Konformität. Die Spezifikation spricht direkt über den Elementinhalt ...

W3C-Spezifikation

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

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

Sehen? ein Dokumentenbaum des Elements Inhalt . So wie ich es verstehe, bedeutet dies innerhalb eines Containers.

Seltsamerweise funktioniert es mit einigen Arten von Eingaben. Zumindest in Chrome,

<input type="checkbox" />

funktioniert gut, genauso wie

<input type="radio" />

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

Hier ist ein anderer Ansatz (vorausgesetzt, Sie haben die Kontrolle über den HTML-Code): Fügen Sie <span></span>direkt nach der Eingabe ein Leerzeichen hinzu und zielen Sie darauf ab, dass in CSSinput.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, da .ng-invalidKlassen automatisch zu <input>Formularelementen und zum Formular hinzugefügt werden , nicht jedoch zum <label>.

:beforeund :afterwerden in einem Container angewendet, dh Sie können ihn für Elemente mit einem End-Tag verwenden.

Dies gilt nicht für selbstschließende Elemente.

Nebenbei bemerkt, Elemente, die sich selbst schließen (wie z. B. img / hr / input), werden 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

Ich habe das verwendet background-image, um den roten Punkt für die erforderlichen Felder zu erstellen.

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 Pseudoelement in ein Eingabeelement einfügen, sondern ein Schattenelement wie einen Platzhalter!

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

Um es in anderen Browsern verwenden arbeiten :-moz-placeholder, ::-moz-placeholderund :-ms-input-placeholder in 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-Vorprozessoren (SASS, WENIGER ...), ohne dass Vorprozessoren Folgendes verwenden:

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

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

Eine funktionierende Lösung in reinem CSS:

Der Trick besteht darin, anzunehmen, dass nach dem Textfeld ein dom-Element steht.

/*
 * 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:

• Sie müssen hoffen, dass es ein folgendes dom-Element gibt:
• Sie müssen hoffen, dass kein anderes Eingabefeld Ihrem Eingabefeld folgt.

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

Ich fand diesen Beitrag, da ich das gleiche Problem hatte. Dies war die Lösung, die für mich funktioniert hat. Im Gegensatz zum Ersetzen des Eingabewerts entfernen Sie ihn einfach und positionieren absolut einen Bereich dahinter, der dieselbe Größe hat. Auf den Bereich kann eine :beforePseudoklasse mit der Symbolschrift 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>

Das größte Missverständnis hier ist die Bedeutung der Wörter beforeund after. Sie beziehen sich nicht auf das Element selbst, sondern auf den Inhalt des Elements. Ist element:beforealso vor dem Inhalt und element:afterist nach dem Inhalt, aber beide befinden sich immer noch im ursprünglichen Element.

Das inputElement hat keinen Inhalt in der CSS-Ansicht und daher keinen :beforeoder :afterPseudoinhalt. Dies gilt für viele andere leere oder ersetzte Elemente.

Es gibt kein Pseudoelement, das sich außerhalb des Elements bezieht .

In einem anderen Universum könnten diese Pseudoelemente etwas anderes genannt worden sein, um diese Unterscheidung klarer zu machen. Und vielleicht hat jemand sogar ein Pseudoelement vorgeschlagen, das wirklich außerhalb des Elements liegt. Bisher ist dies in diesem Universum nicht der Fall.

Gemäß einem Hinweis in der CSS 2.1-Spezifikation definiert die Spezifikation „die Interaktion von: vorher und: nachher mit ersetzten Elementen (wie IMG in HTML) nicht vollständig. Dies wird in einer zukünftigen Spezifikation genauer definiert. “ Obwohl inputes sich nicht mehr wirklich um ein ersetztes Element handelt, hat sich die Grundsituation nicht geändert: Die Auswirkung von :beforeund :afterauf sie ist nicht spezifiziert und hat im Allgemeinen keine Auswirkung.

Die Lösung besteht darin, einen anderen Ansatz für das Problem zu finden, das Sie auf diese Weise angehen möchten. Das Einfügen von generiertem Inhalt in ein Texteingabesteuerelement wäre sehr irreführend: Für den Benutzer scheint es Teil des Anfangswertes im Steuerelement zu sein, es kann jedoch nicht geändert werden. Es scheint also etwas zu sein, das zu Beginn des Steuerelements erzwungen wurde Kontrolle, aber es würde nicht als Teil der Formulardaten übermittelt.

Wie andere erklärt, inputsind s irgendwie-ersetzt Leere Elemente, so werden die meisten Browser erlauben nicht , dass Sie zu generieren ::beforenoch ::afterpseudo-Elemente in ihnen.

Allerdings ist die CSS - Arbeitsgruppe unter Berücksichtigung ausdrücklich erlaubt ::beforeund ::afterfalls das inputhat appearance: none.

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

Safari und Chrome erlauben beide Pseudoelemente in ihren Formulareingaben. Andere Browser tun dies nicht. Wir haben versucht, dies zu entfernen, aber der Verwendungszähler zeichnet ~ 0,07% der Seiten auf, die ihn verwenden, was dem 20-fachen unserer maximalen Entfernungsschwelle entspricht.

Um Pseudoelemente für Eingaben zu spezifizieren, müsste die interne Struktur der Eingaben zumindest etwas spezifiziert werden, was wir noch nicht geschafft haben (und ich bin nicht sicher, ob wir das können). Aber Boris schlug in einem der Bugthreads vor, es beim Erscheinen zuzulassen: Keine Eingaben - im Grunde genommen werden sie nur in <div> s umgewandelt, anstatt "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 um die Eingabe haben, um ein Vorher- oder Nachher-Pseudoelement zu verwenden. Hier ist eine Geige, die ein Vorher auf dem Wrapper-Div einer Eingabe hat und dann das Vorher in die Eingabe einfügt - oder zumindest so aussieht. Offensichtlich ist dies eine Problemumgehung, aber zur Not effektiv und eignet sich für die Reaktion. Sie können dies leicht zu einem After machen, wenn Sie andere Inhalte einfügen müssen.

Geige arbeiten

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

Der 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: vor und: nach zu formatieren, versuchen Sie wahrscheinlich, die Auswirkungen anderer Bereiche, Bereiche oder sogar Elemente in Ihrem CSS-Stapel nachzuahmen.

In der Antwort von Robert Koritnik heißt es: Vorher und Nachher können nur auf Containerelemente angewendet werden, und Eingabeelemente sind keine Container.

In HTML 5 wurde jedoch das Schaltflächenelement 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>

Zusammenfassung

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

Geige : 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;
}

:beforeund :afterfunktioniert nur für Knoten, die untergeordnete Knoten haben können, da sie einen neuen Knoten als ersten oder letzten Knoten einfügen.

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 benötigen ein div-Elternteil, das die Auffüllung und das: after übernimmt. Das erste übergeordnete Element muss relativ sein und das zweite div sollte absolut sein, damit Sie die Position des After festlegen können.

Ich habe eine andere Idee, stattdessen dies zu verwenden:

<div>
<input type="text"></input>text can be entered here</div>