The `$select` *widget* supports use of a `class="..."` attribute, but NOT `
style="..."`.
In order to change the color of the `$select` widget, you will need to
define a CSS classname that specifies the background color.
Something like this:
```
<style>.thisColor { background:{{!!color}}; }</style>
<$select field="color" class="thisColor">
<$list filter="[enlist<X11Colors>]" variable=thisColor>
<option style={{{ [[background:]] [<thisColor>] [[;]] +[join[]]
}}}><<thisColor>></option>
</$list>
</$select>
```
-e
On Thursday, September 29, 2022 at 12:15:36 AM UTC-7 Samir S. wrote:
> 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/4a51721e-f299-4ae5-b4cd-819b7a0381ben%40googlegroups.com.
