[tw5] Re: coloring dropdown options
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:
```
.thisColor { background:{{!!color}}; }
<$select field="color" class="thisColor">
<$list filter="[enlist]" variable=thisColor>
] [[;]] +[join[]]
}}}><>
```
-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:
```
.red { background:red; }
.green { background:green; }
.blue { background:blue; }
<$select field="color">
item 1
item 2
item 3
```
Using direct styles and a $list of colors:
```
<$select field="color">
<$list filter="red green blue" variable=thisColor>
] [[;]] +[join[]]
}}}>
<>
```
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]" variable=thisColor>
] [[;]] +[join[]]
}}}>
<>
```
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
[tw5] Re: coloring dropdown options
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:
>>> ```
>>>
>>> .red { background:red; }
>>> .green { background:green; }
>>> .blue { background:blue; }
>>>
>>>
>>> <$select field="color">
>>>item 1
>>>item 2
>>>item 3
>>>
>>> ```
>>>
>>> Using direct styles and a $list of colors:
>>> ```
>>> <$select field="color">
>>><$list filter="red green blue" variable=thisColor>
>>> ] [[;]] +[join[]]
>>> }}}>
>>> <>
>>>
>>>
>>>
>>> ```
>>>
>>> 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]" variable=thisColor>
>>> ] [[;]] +[join[]]
>>> }}}>
>>> <>
>>>
>>>
>>>
>>> ```
>>> 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/7d4b184a-44b2-4cc9-94f9-13fb3b8e3b58n%40googlegroups.com.
[tw5] Re: coloring dropdown options
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:
>> ```
>>
>> .red { background:red; }
>> .green { background:green; }
>> .blue { background:blue; }
>>
>>
>> <$select field="color">
>>item 1
>>item 2
>>item 3
>>
>> ```
>>
>> Using direct styles and a $list of colors:
>> ```
>> <$select field="color">
>><$list filter="red green blue" variable=thisColor>
>> ] [[;]] +[join[]] }}}>
>> <>
>>
>>
>>
>> ```
>>
>> 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]" variable=thisColor>
>> ] [[;]] +[join[]] }}}>
>> <>
>>
>>
>>
>> ```
>> 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/fe23015f-fa16-46f1-90f3-6d02eeb65dd2n%40googlegroups.com.
[tw5] Re: coloring dropdown options
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:
> ```
>
> .red { background:red; }
> .green { background:green; }
> .blue { background:blue; }
>
>
> <$select field="color">
>item 1
>item 2
>item 3
>
> ```
>
> Using direct styles and a $list of colors:
> ```
> <$select field="color">
><$list filter="red green blue" variable=thisColor>
> ] [[;]] +[join[]] }}}>
> <>
>
>
>
> ```
>
> 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]" variable=thisColor>
> ] [[;]] +[join[]] }}}>
> <>
>
>
>
> ```
> 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/d24bccc6-eafb-444d-a964-6cd7fe24e194n%40googlegroups.com.
[tw5] Re: coloring dropdown options
You can you CSS `class` or `style` attributes to specify the `background`
color attribute, like this:
Using classnames:
```
.red { background:red; }
.green { background:green; }
.blue { background:blue; }
<$select field="color">
item 1
item 2
item 3
```
Using direct styles and a $list of colors:
```
<$select field="color">
<$list filter="red green blue" variable=thisColor>
] [[;]] +[join[]] }}}>
<>
```
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]" variable=thisColor>
] [[;]] +[join[]] }}}>
<>
```
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/d265bc48-84cb-4ec4-96b0-6a6c1f71e5e0n%40googlegroups.com.
