Icon in <option>

[DeusFigendi (noReg)]

Guten Morgen,
ich fass mich kurz... ich möchte gerne ein Icon vor jede Option eines Select-Elements setzen. (Alle Icons sind gleich groß)

1. Versuch:
img-Element als erstes Kind, dann der Text.
Funktioniert im Fx, nicht in Iron außerdem ist es eigentlich kein Inhalt also

2. Versuch:

background-image:url;  
background-repeat:no-repeat;  
margin-left:20px; /* die Icons sind 16 breit */

(alles auf das Option-Element)
margin wird nicht umgesetzt, Icons erscheinen im Fx aber wieder nicht in Iron

3. Versuch:
Ersetze margin durch Zeichenkette " . . . " (&nbsp; ginge sicher auch...)
geht, sieht aber hässlich aus und ist nicht vorhandener Inhalt und geht natürlich auch nicht im Iron.

Allerdings ist die Sache mit Inhalt/kein-Inhalt relativ nebensächlich, da das ganze ein JS-Programm ist und Maschinen voraussichtlich eh nicht dran gehen :)

Frage: Wie bring ich dem Chromium Icons bei?
Frage: Wie kann ich elegant den Text nach rechts schieben?

[DeusFigendi (noReg)]

Nachtrag: Das Verschieben habe ich im Fuchs lösen können, indem ich ein span-Element um den Text gezogen habe und dieses formatiert.
Da sich im Iron nichts tat habe ich alle Möglichkeiten versucht:

left: 20px;  
margin-left: 20px;  
padding-left: 20px;  
position: relative;

Im Firefox wirkt alles im Iron nichts davon... :(
Ach ja und am Ende soll es in Opera (und vielleicht Safari) natürlich auch noch funktionieren ^^

[MudGuard]

Hi,

Nachtrag: Das Verschieben habe ich im Fuchs lösen können, indem ich ein span-Element um den Text gezogen habe und dieses formatiert.
Da sich im Iron nichts tat habe ich alle Möglichkeiten versucht:

left: 20px;

margin-left: 20px;
padding-left: 20px;
position: relative;

> Im Firefox wirkt alles im Iron nichts davon... :(  
> Ach ja und am Ende soll es in Opera (und vielleicht Safari) natürlich auch noch funktionieren ^^  
  
Verstehe ich das richtig? Du hast <option><span>text</span></option>?  
Wenn nicht: es ist nicht sehr hilfreich, nur Teile des CSS (also nur die Deklarationen ohne die Selektoren) und ohne das zugehörige HTML zu zeigen.  
  
option erlaubt nur Text als Inhalt:  
<!ELEMENT OPTION - O (#PCDATA)         -- selectable choice -->  
  
Ein Bildchen vor den Option-Text sollte per :before und content gehen, siehe [diesen Uraltartikel](http://aktuell.de.selfhtml.org/artikel/css/optionbilder/)  
  
Ersatzweise vielleicht noch per background-image und padding-left.  
  
cu,  
Andreas

-- 
[Warum nennt sich Andreas hier MudGuard?](http://MudGuard.de/)  
[O o ostern ...](http://ostereier.andreas-waechter.de/)  
  
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.  

[DeusFigendi (noReg)]

Verstehe ich das richtig? Du hast <option><span>text</span></option>?

Ja.

Wenn nicht: es ist nicht sehr hilfreich, nur Teile des CSS (also nur die Deklarationen ohne die Selektoren) und ohne das zugehörige HTML zu zeigen.

Sorry, das war C&P aus den Entwicklertools von Chromium. Die Eigenschaften habe ich in JS dreckig mit element.style.eigenschaft = "wert"; zugewiesen, dürften für die Renderer also im style-Attribut stehen.

option erlaubt nur Text als Inhalt:
<!ELEMENT OPTION - O (#PCDATA)         -- selectable choice -->

Oh... okay. Danke für die Aufklärung, das ist ja ärgerlich :) Na dann kann ich Chromium ja kein Fehlverhalten vorwerfen, bei fehlerhaftem Code kann er ja nur raten.

Ein Bildchen vor den Option-Text sollte per :before und content gehen, siehe diesen Uraltartikel

Mhm mal probieren

Ersatzweise vielleicht noch per background-image und padding-left.

Ja, das ging ja nicht.
background-image ging im Chromium nicht und padding-left weder im Chromium noch im FireFox (4 btw). Sondern letzteres nur mit dem span-Element... naja mit :before sollte's sich ja von selbst verschieben, gute Idee!

Ich melde mich dann mit den neuen Sorgen :D

[DeusFigendi (noReg)]

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]

Hi,

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!?

Du vermutest falsch. Das bedeutet, daß Webkit und Opera das nicht umsetzen.

Bei form-Controls sind styles stärker eingeschränkt als bei anderen Elementen. Und manches können die nicht-Geckos einfach (noch immer) nicht, damals, als ich den Artikel schrieb, konnte es auch nur Gecko ...

cu,
Andreas

[DeusFigendi (noReg)]

Bei form-Controls sind styles stärker eingeschränkt als bei anderen Elementen. Und manches können die nicht-Geckos einfach (noch immer) nicht, damals, als ich den Artikel schrieb, konnte es auch nur Gecko ...

Ja, das schriebst du auch _in_ den Artikel :) (hatte ihn vor der Umsetzung nur überflogen, denn die Technik an sich war mir bekannt).
Aber ich dachte halt... es sind mehr als drei Jahre ins Land gegangen und... naja ich dachte/hoffte eben, dass diese Einschränkungen gerade bei WebKit eher nicht gepflegt würden.
Da alle drei Varianten:
img-Element
background-image und
:before
nur in Gecko funktionieren und letztere am Besten bleib' ich dabei. Um für Benutzer anderer Browser die Information dennoch sichtbar zu machen werde ich mit JS ein img-Element _vor_ das select-Element hängen und dessen src-Attribut onChange (oder so) ändern. Dann hat Gecko das sogar noch nach der Auswahl da stehen :)

[MudGuard]

Hi,

Aber ich dachte halt... es sind mehr als drei Jahre ins Land gegangen

Artikeldatum: 27.06.2002

Das sind über 8 ...

cu,
Andreas

[Der Martin]

Hallo,

Aber ich dachte halt... es sind mehr als drei Jahre ins Land gegangen
Artikeldatum: 27.06.2002
Das sind über 8 ...

ja und? Das sind doch "mehr als drei". ;-)

*scnr*
 Martin

[MudGuard]

Hi,

Aber ich dachte halt... es sind mehr als drei Jahre ins Land gegangen
Artikeldatum: 27.06.2002
Das sind über 8 ...
ja und? Das sind doch "mehr als drei". ;-)

Ja und? ich habe nicht behauptet, daß es drei oder weniger sind.

Im Footer des Artikels ist (warum auch immer) © 2007 angegeben. Das könnte den unbedarften Leser zu der Vermutung führen, daß der Artikel etwas "mehr als drei Jahre" alt ist.

Warum das Erscheinungsdatum in den Artikeln selbst nicht angegeben ist, verstehe ich bis heute nicht - ich hatte damals mit ich weiß nicht mehr welchem Self-Developer ein paar Mails zu dem Thema ausgetauscht ...
In der Übersicht der CSS-Artikel steht's dann aber doch (http://aktuell.de.selfhtml.org/artikel/css/).

cu,
Andreas

[Deus Figendi]

Im Footer des Artikels ist (warum auch immer) © 2007 angegeben. Das könnte den unbedarften Leser zu der Vermutung führen, daß der Artikel etwas "mehr als drei Jahre" alt ist.

Deine Analyse ist richtig, daher kam die Ansage... danke für die Korrektur :)

[Beat]

Hat denn noch jemand Ideen (oder zumindes Erklärung)?

Mach dir das Leben einfach:
Nimm radio inputs.

mfg Beat

[EKKi]

Mahlzeit DeusFigendi (noReg),

HTML:
<option value="1" class="option_with_icon" id="option_table_row_data_head1">table-row-data/head</option>

option_table_row_data_head1:before {

content:url(./tagset1.gif);
}

  
Es gibt kein Element vom \*TYP\* "option\_table\_row\_data\_head1" - es gibt lediglich ein Element mit dieser \*ID\*. Vielleicht solltest Du es also mit  
  
~~~css
#option_table_row_data_head1:before {  
  content:url(./tagset1.gif);  
}

versuchen ... :-)

MfG,
EKKi

[Deus Figendi]

Man EKKi, hast du mich erschrocken ^^
Nein, war'n Übertragungsfehler ins Forum, im Code war und ist das Doppelkreuz/Raute/Nummernsymbol/whatever durchaus drin :)

Ehrlich gesagt wäre mir das auch _ZU_ fehlertolerant vom Gecko gewesen, wenn er ein Element nicht findet nach einer gleichnamigen ID suchen würde.

Dennoch danke, wäre das der Fehler gewesen hätte ich darauf hingewiesen werden wollen :D