Sugarcube 2 listbox: can you have different colors for different options?

I haven’t been able to find an answer for this.

In a listbox is it possible to have the options be colored per-option instead of all options being the same color?

I know how to change the listbox colors in css for .macro-listbox, .macro-listbox:focus, and .macro-listbox:hover. But those don’t affect the list of options that show up when you click the listbox, which is also an issue.

I don’t know how to do something like have an option colored red and another option colored green, in the same listbox. The option that should be red would always show red colored text, whether focused, unfocused, hover, or in the list of options that pop up when clicking the listbox.

Likewise the green option would always show green text.

When styling a HTML element structure, like the one generated by macros like <<listbox>>, it important to know the exact element contents of that structure because that will affect which methods can be used to style it.

You left out a few important details in your question, and as you didn’t supply an example we can’t infer the answers from it. Things like:

  1. Are the “options” of the list being manually added like the 1st of the <<listbox>> macro’s examples, or will they be obtained from a collection like the 2nd & 3rd examples.
  2. Is the set of “options” that will be coloured static (like a pre-determine list of hair colours) or dynamic (like the current contents of a backpack).
  3. How are you determining which “option” needs to be styled “green”, and which needs to be “red”.

To demonstrate how the above details can be important lets look at a simple example like the following…

<<set _pieOptions to ["blueberry", "cherry", "coconut cream"]>>
<<set $pie to "blueberry">>

What's your favorite pie?
<<listbox "$pie" autoselect>>
	<<optionsfrom _pieOptions>>
<</listbox>>

…and then use the web-browser’s Web Developer Tools to inspect the HTML element structure being created by the <<listbox>> macro itself. It will look something like…

<select id="listbox-pie" name="listbox-pie" tabindex="0" class="macro-listbox">
	<option value="0">blueberry</option>
	<option value="1">cherry</option>
	<option value="2">coconut cream</option>
</select>

Now if we assume that the “cherry” option should be the “red” one, and the “coconut cream” option should be “green”, and that the value associated with each of those options does not change, then we could use Attribute related CSS Selectors to target each specific option…

#listbox-pie > option[value="1"] {
	color: red;
}
#listbox-pie > option[value="2"] {
	color: green;
}

warning: The above technique is only one of a couple that could be used to style the options, and which technique you would use depends greatly on the nature of the element structure, how that structure is being created, and how the association being “option” & specific styling is being determined.

2 Likes

Oh, you can set attributes for a specific option[value=x]. I think that’s exactly what I was looking for. Thank you.

  1. I’ve only been using manually filled listboxes like the 1st example so far. I haven’t set up an inventory system yet, but once I do that will be like the 2nd or 3rd example. The 2nd and 3rd example are the way that would be most important to know how to color.

  2. I was planning on static for everything but this question made me realize something. Items will be able to become cursed (and probably uncursed too). It would make lot of sense to have currently cursed items be another color, so that would be dynamic.

Items that can be cursed would have three states. Normal/no curse (default white color). Cursed (more pale shade of curse color, probably purple). Extra cursed (strong curse color).

  1. Red and green would be specific items which are always the same color. If you mean what kind of specific setup is used, that I hadn’t determined yet because I needed to know first if coloring specific items in a listbox was even possible before getting past the planning stage of that.