✔ Pseudoelemente auf input nur in Opera

[Grafixboy]

Hi ihr Lieben

Wieso wird das Pseudoelement 'after' und 'before', wenn man es auf '<input>' anwendet, nur im Opera richtig angezeigt ?
Oder war es nicht vorgesehen das man die pseudoelemente auch auf value-werte anwenden kann, wie es Opera aber interpretiert ?

Damit ihr wisst was ich meine hier
die Seite mal in den gängigen Browsern betrachten.
Vielleicht gibt es ja einen Trick das überall hinzubekommen.

So wie im Opera soll es überall aussehen.

MfG Grafixboy

reduzierter code
CSS:

...
input:before{
content:  url( 'http://www.gcmv-damenteam.de/download/assets/Download_32x32.png' )"  " ;
vertical-align:bottom;   
}

input:after{
content: "  " url( 'http://www.gcmv-damenteam.de/download/assets/Download_32x32.png' ) ;
vertical-align:bottom;
}

HTML:

...
<form>
    <input class="formbutton" type="button" value="Download"  onClick="window.open('#')" />
</form>
...

 

[Maik]

Oder war es nicht vorgesehen das man die pseudoelemente auch auf value-werte anwenden kann ?

Sieht ganz so aus, denn der Wert im value-Attribut stellt keinen "Inhalt" dar, wie beispielsweise der Text innerhalb eines <p>-Elements.

• 5.12.3 Die Pseudo-Elemente :before und :after

<p class="test">foobar</p>

.test:before{
content:  url( 'http://www.gcmv-damenteam.de/download/assets/Download_32x32.png' )"  " ;
vertical-align:bottom;   
}

.test:after{
content: "  " url( 'http://www.gcmv-damenteam.de/download/assets/Download_32x32.png' ) ;
vertical-align:bottom;
}

    #innen {
    width:600px;
    height:785px;
    }
    
<!--Buttonlayout-->
input{
color:#fff;
}

Übrigens werden Kommentare in CSS nicht mit der typischen HTML-Syntax ausgezeichnet, was in dem einen oder anderen Browser zu Fehldarstellungen führt, weil er die nachfolgenden Regelmengen nicht mehr interpretiert, und hier schon einige Male Anlaß für ein Thema war.

• 4.1.9 Kommentare

mfg Maik

 

[Grafixboy]

Danke dir Maik

Da war meine Vermutung also richtig.
Schade eigendlich weil ich die Lösung
komfortabel hätte nutzen können.

Und Danke auch für den Tip.
Das hat mir bei einer anderen Web-Seite ein
lange stehendes Fragezeichen verdeutlicht.


MfG und einen schönen Abend Grafixboy