Hintergrundbild in SELECT, OPTION funktioniert nicht

[Paul]

eigentlich wollte ich es so machen:

option[value="1"]:before { background-image: url("grafik.gif"); }

aber es führte nicht zum Ziel, dann direkt in das HTML

<option value="1" style="background-image: url("grafik.gif")">Eingabe</option>

doch auch hier nix, was mache ich den falsch?

Paul

[MudGuard]

Hi,

option[value="1"]:before { background-image: url("grafik.gif"); }

klar. Ohne Größenangabe ist das Pseudo-Element :before ziemlich klein.

<option value="1" style="background-image: url("grafik.gif")">Eingabe</option>

Dein Style-Attribut ist also

style="background-image: url("

Das wird ignoriert, da kein gültiges CSS. Verwende für die url keine oder andere Anführungszeichen als für den Attributwert.

cu,
Andreas

[ChrisB]

Hi,

option[value="1"]:before { background-image: url("grafik.gif"); }

klar. Ohne Größenangabe ist das Pseudo-Element :before ziemlich klein.

Davon abgesehen rendern auch nicht alle Browser Pseudo-Elemente für Elemente, die eigentlich keine Kindelemente haben (dürfen).

MfG ChrisB

[MudGuard]

Hi,

option[value="1"]:before { background-image: url("grafik.gif"); }

klar. Ohne Größenangabe ist das Pseudo-Element :before ziemlich klein.

Davon abgesehen rendern auch nicht alle Browser Pseudo-Elemente für Elemente, die eigentlich keine Kindelemente haben (dürfen).

Wirklich? Ich dachte, das wäre nur bei Elementen der Fall, die keinen Inhalt haben dürfen (img, br ...)

cu,
Andreas

[ChrisB]

Hi,

Davon abgesehen rendern auch nicht alle Browser Pseudo-Elemente für Elemente, die eigentlich keine Kindelemente haben (dürfen).

Wirklich? Ich dachte, das wäre nur bei Elementen der Fall, die keinen Inhalt haben dürfen (img, br ...)

Na ja, die Spezifikation besagt doch, dass diese Pseudoelemente so gerendert werden sollen, als ob ein neues Kind-Element eingefügt worden wäre (als erstes bzw. letztes) … und das geht bei img genauso wenig wie bei option.

Ich würde mich also nicht darauf verlassen, dass es für option funktioniert.

(Allerdings sagt die Spezifikation auch, “Note: This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.” – aber dieses Update lässt soweit ich sehe noch auf sich warten …)

MfG ChrisB