[HELP] Changing drop-down selected option color upon selection

As the title states, I 'm trying to change the color of the text of the selected option in a drop down menu.  I have 5 options in the drop-down, each with a  unique color. When one is selected, I want it to retain its specific color.  I'm new to sheet worker scripts and I'm not sure how to call and set these variables.    Thanks

You can't do this via sheetworkers (sheetworkers are an extremely limited subset of javascript that do not include any method for directly interfacing with the DOM. You can do some css tricks to format the select (although I'm not aware of any that allow different formats based on selection).

Darn!  Thanks for the prompt response.  

Could you preface each selection with an emoji dot of the appropriate color? It wouldn't change the color of the text, but the dot should remain. I'd post an example, but the forums do not play well with emojis.

I like that idea.  That could serve my purpose well. Just for my edification, not having access to the DOM means that API events and scripts cannot alter the char sheet, aside from changing the values of attributes?  I just tried to set the select element's inline style to an attribute that would update with different selections, but that didn't work at all. wanh wanh

Yep, the only manipulation you can do is via the sheetworker functions listed in the wiki (specifically setattrs). This also goes for what information your scripts can collect from the sheet

Will said: I like that idea.  That could serve my purpose well. Just for my edification, not having access to the DOM means that API events and scripts cannot alter the char sheet, aside from changing the values of attributes?  I just tried to set the select element's inline style to an attribute that would update with different selections, but that didn't work at all. wanh wanh Yeah. You can cheat a bit, though, as long as you're just changing element styles. You can use sheet workers to change the value of a hidden input (you may not even need the workers), and then use CSS that alters the styling of another element according to the value of that input.

Yep, but note that the input must be a checkbox or radio type input, otherwise the value detection doesn't work.

Scott C. said: Yep, but note that the input must be a checkbox or radio type input, otherwise the value detection doesn't work. No, hidden also works (and it's more economical if you have more than 2 states to track, since checkbox/radio can only distinguish between checked and unchecked).

Hidden is fine, but (at least afaik), if it isn't a checkbox/radio the css won't recognize the actual value tht was input into the attribute, it only looks at the value="blahblahblah" declaration in the HTML code. Have you used a non checkbox/radio successfully? Being hidden doesn't exclude it being a checkbox or radio (they're completely different declarations in the htmll.

So, I'm talking about an input of type hidden, not about another type of input hidden via CSS. Something like this <input type="hidden" name="attr_blah"> will actually change its value attribute  when the corresponding attribute value changes, as opposed to other inputs (where the value attribute is statically determined via the HTML).

Oh, nice. I had no idea,thanks Jakob.

Scott C. said: Oh, nice. I had no idea,thanks Jakob. I didn't know either for a long time, learning that this works changed my world (maybe not that, but it did save me a lot of unnecessary sheet workers and attributes).

Yeah, I've got so many hidden radios that I can replace with one input declaration now.

So, the value of this hidden input can trigger CSS that changes the styling of my select? This is an awesome work-around.  Thank you much.  

Will said: So, the value of this hidden input can trigger CSS that changes the styling of my select? This is an awesome work-around.  Thank you much.   Yep, and by giving the hidden input the same name as the select, they'll be kept in sync automatically (or use sheet workers if the relationship between colour and the state of the select is more complicated).

What should my CSS selector look like?  I'm pretty new to this and I've mostly just been stealing code to cobble my sheet together.  Coming up with this stuff from scratch is still a bit beyond me.  Does this make any sense? .soulElem_Switch[value="0"] ~ .soulElemSelect1 {     color: gray; } Where I've given the hidden input  a class="soulElem_Switch" and the select a class = "soulElemSelect1".   Am I using the value selector properly and does that combine with the class selector?  And is the sibling combinator appropriate if the two elements are just next to each other in the html? How far off am I?   Thanks

Yep, this will almost*  work**. If they are immediate siblings (as you say they are), you should use "+" instead of "~" to make it more specific. * Remember that all classes get prefixed with "sheet-" in the HTML, so you should add "sheet-" to your class names (and probably the HTML as well) ** This is just a stylistic preference, but I would a) not use underscores in class names, use hyphens instead; b) make class names all lowercase: .sheet-soul-element-switch[value="0"] + .sheet-soul-element-select1 { /* stuff */ } Use these conventions or not, but you might thank me later ;).

Thanks so much my friend

Ok, I still can't get this to work.  Here's my HTML: <input type="hidden" name="attr_soulElem" class="sheet-soul-elem-switch"><select style="color:gray;font-weight:bold;width:80px" class="sheet-soul-elem-select1" id = "elemSel2" name="attr_soulElem">                   <option style="color:gray;font-weight:bold" selected = "selected" value="0">Solid</option>                   <option style="color:blue;font-weight:bold" value="1">Flow</option>                   <option style="color:orange;font-weight:bold" value="2">Life</option>                   <option style="color:red;font-weight:bold" value="3">Radiant</option>                   <option style="color:green;font-weight:bold" value="4">Scatter</option>                   <option style="color:black;font-weight:bold" value="5">Void</option>                 </select> And my CSS: .sheet-soul-elem-switch[value="0"] + .sheet-soul-elem-select1 {     color: gray; } .sheet-soul-elem_switch[value="1"] + .sheet-soul-elem-select1 {     color:blue; } .sheet-soul-elem_switch[value="2"]  + .sheet-soul-elem-select1 {     color:orange; } .sheet-soul-elem_switch[value="3"]  + .sheet-soul-elem-select1 {     color: red; } .sheet-soul-elem_switch[value="4"]  + .sheet-soul-elem-select1 {     color: yellow; } .sheet-soul-elem_switch[value="5"]  + .sheet-soul-elem-select1 {     color: black; } Any thoughts?

Try putting !important after the color declaration maybe? Also, inspect your select and see what css rules are being applied. Also, Id's are pointless in sheets as they are not used at all in character sheets.

.sheet-soul-elem _ switch class="sheet-soul-elem - switch" Difference in bold. Try putting !important after the color declaration maybe? Never!

nice, something obvious.  Thank you again. *Edit* One last thing I had to figure out: the in-line style:color was overriding the CSS. 

This is another trick that should be included with the  CSS Wizardry page.  Thanks for sharing this. Edit: Actually there is an example on the wiki page Styling Select Dropdows , but I've also added a simplified version of the method mentioned here.  Styling Select Dropdowns Text

Is there a way to style an input (type = number), using the value of the input? I have a grid of values that have a default value of 0. I want them to be grey or black when 0, but change to green when any other value is entered.

Could adapt the type=hidden that Jakob demonstrates above: HTML <input type="hidden" name="attr_default_zero" class="sheet-zero-style"> <input type="number" name="attr_default_zero" class="sheet-num-to-style"> CSS .sheet-num-to-style{ color:green; } .sheet-zero-style[value="0"] ~ .sheet-num-to-style{ color:grey; }

I was hoping to avoid that, because I have a lot of cells in this grid, and doubling the number of inputs seems excessive.