Span in select option

[juiced01]

IN de webshop die ik aan 't ontwikkelen ben, zijn er verschillende keuzes bij een product, bijvoorbeeld een maat of kleur. Nu wil ik een selectbox / dropdown met daarin de kleurnaam aan de linkerkant, en een blokje met die kleur er in aan de rechter kant. Dus bijvoorbeeld

code:

Blauw    [ blauw blokje ]
Rood     [ rood blokje  ]

Deze kleuren zijn te wijzigen in 't CMS, dus een plaatje als achtergrond van de <option> is geen mogelijkheid. Een span met background-color ook niet, aangezien er in een <option> geen html mag zitten.

Nou dacht ik, ik maak een unordered list, en maak er met javascript een selectoption van. Dit gaat echter niet in elke browser goed - waarschijnlijk dezelfde reden: een span in een option mag niet. Alleen FF vond 't prima.

Zijn er andere oplossingen om tot een soortgelijke oplossing te komen?

[posttoast]

Als je toch met javascript bezig bent, waarom maak je er dan niet in zijn geheel een custom ding van? Dus het hele select-gebeuren loslaten maar bijvoorbeeld een <ul> die open en dichtklapt. Als je maar zorgt dat het zonder javascript ook nog netjes werkt (dan toon je gewoon de <select>).

Edit: zoiets dus: http://lab.aspektas.com/select/select.html

[ Voor 9% gewijzigd door posttoast op 15-04-2011 15:11 ]

[MueR]

Een plaatje is toch gewoon wel mogelijk? Ik neem tenminste aan dat de kleur wordt opgeslagen in HEX danwel RGB waarden? Op basis daarvan een klein plaatje genereren met deze kleur is niet heel veel werk lijkt me?

Een alternatief plaatje is een witte background, met daarin een klein transparant window waar de background color door heen kan loeren

Dat een span niet binnen een option mag is ook gewoon normaal. Dat staat in de spec.

[moozzuzz]

MueR schreef op vrijdag 15 april 2011 @ 16:35:
Een alternatief plaatje is een witte background, met daarin een klein transparant window waar de background color door heen kan loeren

Als het zuiver over kleurinformatie gaat, denk ik dat dit inderdaad de beste oplossing is (was eenzelfde verhaal maar wat langdradiger aan 't uittypen ;-) .

[posttoast]

MueR schreef op vrijdag 15 april 2011 @ 16:35:
Een plaatje is toch gewoon wel mogelijk? Ik neem tenminste aan dat de kleur wordt opgeslagen in HEX danwel RGB waarden? Op basis daarvan een klein plaatje genereren met deze kleur is niet heel veel werk lijkt me?

Een alternatief plaatje is een witte background, met daarin een klein transparant window waar de background color door heen kan loeren

Dat een span niet binnen een option mag is ook gewoon normaal. Dat staat in de spec.

Een plaatje in een <option>?

[MueR]

posttoast schreef op vrijdag 15 april 2011 @ 17:53:
[...]

Een plaatje in een <option>?

Lezen wat ik zeg:

MueR schreef op vrijdag 15 april 2011 @ 16:35:
Een alternatief plaatje is een witte background, met daarin een klein transparant window waar de background color door heen kan loeren

[Klaasvaak]

Een background op een option tag werkt ook enkel in FF. En zodra je hem aanwijst worden de letters wit op een wit plaatje en het venstertje blauw.

Ik ben is ooit is met de onderstaande bezig geweest, deze kan worden opgenomen in de tabindex, en heeft een interactie met een hidden select, zodat hij ook met een toetsenbord te bedienen is.

http://v2.easy-designs.net/articles/replaceSelect2/
http://code.google.com/p/easy-designs/wiki/FauxSelect

[ Voor 52% gewijzigd door Klaasvaak op 15-04-2011 21:26 ]

[Bosmonster]

Selects stylen gaat sowieso niet goed xbrowser, dus dit idee zou ik laten varen. Maak er gewoon een JS-dropdown van (UL met radio buttons bijvoorbeeld).

[pepio]

Ik denk dat dit het script is waar je naar opzoek bent; http://www.htmldrive.net/...ents-with-jQuery-and-CSS3