nicht angemeldet
Ein Bildchen vor den Option-Text sollte per :before und content gehen, siehe diesen Uraltartikel
Mhm mal probieren
(...)
Ich melde mich dann mit den neuen Sorgen :D
Und da bin ich ^^
Problem: Geht nicht!
Also ich habe mich bemüht weite Teile des Styling in ein style-Element auszulagern und werde das auch noch beenden :) Das funktioniert auch alles, ich erzeuge ein style-Element, hänge es im head in den Baum und fülle es. Die Styles werden auch durchaus angewendet.
Ich habe jetzt folgendes gemacht:
HTML:
<option value="1" class="option_with_icon" id="option_table_row_data_head1">table-row-data/head</option>
Dabei wird die ID generiert aus der Beschriftung und dem Wert der Option.
Laut Artikel soll man das über den Attributs-Selektor machen, aber ich fand es so erstmal "robuster".
Darauf angewendet wird folgendes:
.option_with_icon {
/*
position : relative;
left : 20px;
margin-left : 20px;
padding-left : 20px;
*/
background-repeat:no-repeat;
}
option_table_row_data_head1:before {
content:url(./tagset1.gif);
}
Und noch ein bisschen was Geerbtes, was aber lt. Chromium-Entwicklerwerkzeug nicht zur Anwendung kommt und in dem Zusammenhang auch keine Rolle spielt (halt so Schriftgewicht und sowas).
Resultat:
Firefox 4: geht.
Iron 5: geht nicht (kein Icon zu sehen, Entwicklerwerkzeug sagt der Style wird angewendet)
Opera 11: geht nicht (kein Icon zu sehen)
Um irgendwelche Störeinflüsse auszuschließen hab ich dann ein Dokument geschrieben, welches keine Einflüsse mehr haben sollte ^^:
<!DOCTYPE HTML>
<html>
<head>
<title>Option mit Icon</title>
<style type="text/css">
[code lang=css] .slct option:before {
content: "foo";
}
</style>
</head>
<body>
<div>
<form action="http://example.org">
<select class="slct">
<option>bar</option>
<option>baz</option>
</select>
</form>
</div>
</body>
</html>
[/code]
Ergebnis ist leider das gleiche, Iron und Opera ignorieren den Style, Firefox und auch K-Meleon 1.02 (ebenfalls Gecko) tun es, zeigen also foobar und foobaz während erstgenannte nur bar und baz zeigen.
Andere Browser habe ich gerade nicht zum Testen, aber ich schätze mal Webkit ist Webkit, da wird sich nicht mehr viel tun und IE ist mir Wurst (wenns der 9er kann fein, wenn nicht auch egal).
Angesichts dessen, dass Presto es nicht umsetzt - und Webkit eben auch nicht (was ich nur nicht so hoch gewichte) - vermute ich jetzt fast schon, dass Gecko es falsch macht!?
Hat denn noch jemand Ideen (oder zumindes Erklärung)?
Okay, man könnte ein Select-Element aus einer unsortierten Liste nachbauen, aber... dohv, ist mir zu viel Aufwand ^^. Allerdings hätte ich die Icons schon ganz gerne, sie sind nicht unabdingbar, aber sie enthalten durchaus Informationen, nämlich das grafische Resultat, was die jeweilige Option bewirken würde.
MudGuard
Der Martin