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

Sie müssen eine Art Wrapper um die Eingabe herum haben, um ein Before- oder After-Pseudo-Element zu verwenden. Hier ist ein Fiddle, das ein before auf dem Wrapper-Div einer Eingabe hat und dann das before innerhalb der Eingabe platziert - oder zumindest sieht es so aus. Offensichtlich ist dies ein Workaround, aber effektiv in einer Prise und eignet sich zu sein reaktionsschnell. Sie können leicht machen dies ein nach, wenn Sie einige andere Inhalte setzen müssen.

Arbeitsfiedel

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

Das HTML:

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

Der 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;
}

Answer 2

Wenn Sie versuchen, ein Eingabeelement mit :before und :after zu gestalten, sind die Chancen groß, dass Sie versuchen die Auswirkungen anderer span-, div- oder sogar a-Elemente in Ihrem CSS-Stapel nachahmen.

Wie die Antwort von Robert Koritnik zeigt, können :before und :after nur angewendet werden auf Container-Elemente und Eingabeelemente sind keine Container.

Allerdings wurde mit HTML 5 die Taste Element, das ein Container ist und sich wie ein input[type="submit|reset"] Element 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>

Answer 3

:before y :after funktioniert nur bei Knoten, die Unterknoten haben können, da sie einen neuen Knoten als ersten oder letzten Knoten einfügen.

Answer 4

Während die Erklärungen, die darauf hinweisen, dass das Firefox-Verhalten, ::after und ::before Inhalte für Elemente, die keinen Inhalt anzeigen können, nicht zuzulassen, durchaus korrekt sind, scheint es mit dieser Regel immer noch perfekt zu funktionieren:

input[type=checkbox] {
    -moz-appearance: initial;
}

Da ::after die einzige Möglichkeit ist, ein Kontrollkästchen oder eine Radiobox neu zu gestalten ohne Wenn man mehr und unzusammenhängendes Markup einführt, wie z.B. einen nachgestellten Span oder ein Label, denke ich, dass es in Ordnung ist, Firefox zu zwingen, ::before und ::after Inhalte anzuzeigen, obwohl sie nicht den Spezifikationen entsprechen.

Answer 5

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