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 tiddlywiki+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/4a51721e-f299-4ae5-b4cd-819b7a0381ben%40googlegroups.com.