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/d265bc48-84cb-4ec4-96b0-6a6c1f71e5e0n%40googlegroups.com.
