The background and foreground colors for the option that currently has the
FOCUS are determined by the browser's implementation of the underlying HTML
select element. Using my X11 color list example, if you select
"Burlywood", then it will be displayed using the default "white text on a
blue background" because the selected item also has the FOCUS. However, if
you then mouseover other list items -- i.e. changing the FOCUS, but not the
current SELECTION -- then the selected item DOES appear using the specified
"Burlywood" background color. Unfortunately, there doesn't seem to be a
CSS rule that can specify the colors used by the FOCUSED item, so we are
stuck with the browser-defined defaults.
-e
On Wednesday, September 28, 2022 at 12:22:23 AM UTC-7 Samir S. wrote:
> Thank you Eric.
>
> I tried your example it works fine except that the chosen option does not
> remain colored.
> Is this behavior on purpose ?
>
> On Tuesday, 27 September 2022 at 16:54:30 UTC+2 Eric Shulman wrote:
>
>> You can you CSS `class` or `style` attributes to specify the `background`
>> color attribute, like this:
>>
>> Using classnames:
>> ```
>> <style>
>> .red { background:red; }
>> .green { background:green; }
>> .blue { background:blue; }
>> </style>
>>
>> <$select field="color">
>> <option class="red">item 1</option>
>> <option class="green">item 2</option>
>> <option class="blue">item 3</option>
>> </$select>
>> ```
>>
>> Using direct styles and a $list of colors:
>> ```
>> <$select field="color">
>> <$list filter="red green blue" variable=thisColor>
>> <option style={{{ [[background:]] [<thisColor>] [[;]] +[join[]] }}}>
>> <<thisColor>>
>> </option>
>> </$list>
>> </$select>
>> ```
>>
>> In fact, I have used this technique myself to create a "select a color"
>> drop list that shows a list of "X11 Color Names"
>> ```
>> \define X11Colors()
>> AliceBlue AntiqueWhite Aqua Aquamarine Azure Beige Bisque Black
>> BlanchedAlmond Blue BlueViolet Brown Burlywood CadetBlue Chartreuse
>> Chocolate Coral CornflowerBlue Cornsilk Crimson Cyan DarkBlue DarkCyan
>> DarkGoldenrod DarkGray DarkGreen DarkKhaki DarkMagenta DarkOliveGreen
>> DarkOrange DarkOrchid DarkRed DarkSalmon DarkSeaGreen DarkSlateBlue
>> DarkSlateGray DarkTurquoise DarkViolet DeepPink DeepSkyBlue DimGray
>> DodgerBlue Firebrick FloralWhite ForestGreen Fuchsia Gainsboro GhostWhite
>> Gold Goldenrod Gray Green GreenYellow Honeydew HotPink IndianRed Indigo
>> Ivory Khaki Lavender LavenderBlush LawnGreen LemonChiffon LightBlue
>> LightCoral LightCyan LightGoldenrodYellow LightGray LightGreen LightPink
>> LightSalmon LightSeaGreen LightSkyBlue LightSlateGray LightSteelBlue
>> LightYellow Lime LimeGreen Linen Magenta Maroon MediumAquamarine MediumBlue
>> MediumOrchid MediumPurple MediumSeaGreen MediumSlateBlue MediumSpringGreen
>> MediumTurquoise MediumVioletRed MidnightBlue MintCream MistyRose Moccasin
>> NavajoWhite Navy OldLace Olive OliveDrab Orange OrangeRed Orchid
>> PaleGoldenrod PaleGreen PaleTurquoise PaleVioletRed PapayaWhip PeachPuff
>> Peru Pink Plum PowderBlue Purple RebeccaPurple Red RosyBrown RoyalBlue
>> SaddleBrown Salmon SandyBrown SeaGreen Seashell Sienna Silver SkyBlue
>> SlateBlue SlateGray Snow SpringGreen SteelBlue Tan Teal Thistle Tomato
>> Turquoise Violet Wheat White WhiteSmoke Yellow YellowGreen
>> \end
>>
>> <$select field="color">
>> <$list filter="[enlist<X11Colors>]" variable=thisColor>
>> <option style={{{ [[background:]] [<thisColor>] [[;]] +[join[]] }}}>
>> <<thisColor>>
>> </option>
>> </$list>
>> </$select>
>> ```
>> enjoy,
>> -e
>> On Tuesday, September 27, 2022 at 5:08:23 AM UTC-7 Samir S. wrote:
>>
>>> Greetings,
>>>
>>> Is there a way to change the color of each option values inside the
>>> $select widget.
>>>
>>> I've tried adding a class attribute but it does not work.
>>>
>>> Thank you in advance for your help.
>>>
>>> Sincerely.
>>>
>>>
>>>
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/fe23015f-fa16-46f1-90f3-6d02eeb65dd2n%40googlegroups.com.
