I didn't understand the explanation. Never mind. I need to find a way to
"dynamically" change the color of the <$select> tag itself (which has
class/style attributes), or find an other way to do what i want. ;-)
Thank you.
On Wednesday, 28 September 2022 at 17:37:37 UTC+2 Eric Shulman wrote:
> 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/7d4b184a-44b2-4cc9-94f9-13fb3b8e3b58n%40googlegroups.com.
