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 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
Thank you Eric.
I tried your example it works fine except that the chosen option does not remain colored.
Is this behavior on purpose ?
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
1 Like
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.
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