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

Das größte Missverständnis ist hier die Bedeutung der Worte before y after . Sie tun no auf das Element selbst beziehen, sondern auf die Inhalt in dem Element. Also element:before steht vor dem Inhalt, und element:after steht nach dem Inhalt, aber beide befinden sich noch innerhalb des ursprünglichen Elements.

El input Element hat in der CSS-Ansicht keinen Inhalt und daher auch keine :before o :after Pseudo-Inhalt. Dies gilt auch für viele andere nichtige oder ersetzte Elemente.

Es gibt kein Pseudoelement, das sich auf außerhalb das Element.

In einem anderen Universum hätte man diese Pseudoelemente vielleicht anders genannt, um diese Unterscheidung deutlicher zu machen. Und vielleicht hätte jemand sogar ein Pseudoelement vorgeschlagen, das wirklich außerhalb des Elements liegt. Bisher ist dies in diesem Universum nicht der Fall.

Answer 2

Ich habe die background-image um den roten Punkt für Pflichtfelder zu erzeugen.

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

Ansicht auf Codepen

Answer 3

Pseudoelemente wie :after , :before gelten nur für Container-Elemente. Elemente, die an einer einzigen Stelle beginnen und enden, wie <input/> , <img> usw. sind keine Containerelemente und daher werden Pseudoelemente nicht unterstützt. Sobald Sie ein Pseudoelement auf ein Containerelement anwenden, wie <div> und wenn Sie sich den Code ansehen (siehe Bild), können Sie verstehen, was ich meine. Tatsächlich wird das Pseudo-Element innerhalb des Container-Elements erstellt. Dies ist nicht möglich im Falle von <input> o <img>

Answer 4

Eine funktionierende Lösung in reinem CSS:

Der Trick besteht darin, dass man annimmt, dass nach dem Textfeld ein Dom-Element vorhanden ist.

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

(*) Die Lösung ist allerdings begrenzt:

• muss man hoffen, dass es ein folgendes Dom-Element gibt,
• müssen Sie hoffen, dass kein anderes Eingabefeld auf Ihr Eingabefeld folgt.

Aber in den meisten Fällen kennen wir unseren Code, so dass diese Lösung effizient und 100% CSS und 0% jQuery scheint.

Answer 5

Sie können kein Pseudo-Element in ein Eingabe-Element einfügen, aber Sie können ein Schatten-Element einfügen, wie einen Platzhalter!

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

Damit es in anderen Browsern funktioniert, verwenden Sie :-moz-placeholder , ::-moz-placeholder y :-ms-input-placeholder in verschiedenen Selektoren . Die Selektoren können nicht gruppiert werden, denn wenn ein Browser den Selektor nicht erkennt, wird die gesamte Anweisung ungültig.

UPDATE : Der obige Code funktioniert nur mit CSS-Präprozessor (SASS, LESS...), ohne Präprozessoren verwenden:

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