HTML [Twine/SugarCube] CSS - Looking for the name of an element

[Satori6]

I want to change the style of those options to match the color theme.
The explorer shows these, but targeting that element doesn't seem to have an effect. I've also tried select > option, and combinations with the id, but it's not working either.

 

[osanaiko]

You are traveling down the dark path of becoming a frontend web designer. Turn back before you have to learn the box model and begin to use round_corner.gif with table layouts...

Unfortunately, the "built in" form controls like dropdowns are nearly the nastiest things to handle in HTML/CSS. Don't believe me? Then read the holy scripture of web development:

You must be registered to see the links

There's no simple cross browser solution. You'll either have to cook up some special CSS with multiple engine-specific rules, or pull in a styling library.

Try googling for this: "how to style the selections in a dropdown"

 

[ZorasSon]

Like osanaiko said this can be a headache when it comes to cross browser support. Even stuff like the scroll bar can use different options and look vastly different based on your browser.

Other possible options are using a framework (Svelte game when) or just making a new dropdown selector from the ground up (some divs, js for the click and focusout events, css to style it).

 

[Satori6]

You are traveling down the dark path of becoming a frontend web designer. Turn back before you have to learn the box model and begin to use round_corner.gif with table layouts...

Unfortunately, the "built in" form controls like dropdowns are nearly the nastiest things to handle in HTML/CSS. Don't believe me? Then read the holy scripture of web development:

You must be registered to see the links

There's no simple cross browser solution. You'll either have to cook up some special CSS with multiple engine-specific rules, or pull in a styling library.

Try googling for this: "how to style the selections in a dropdown"

Like osanaiko said this can be a headache when it comes to cross browser support. Even stuff like the scroll bar can use different options and look vastly different based on your browser.

Other possible options are using a framework (Svelte game when) or just making a new dropdown selector from the ground up (some divs, js for the click and focusout events, css to style it).

Thank you both! That looks awful.

I'll see if I can come up with a simple solution after doing some reading, but I'm not too hopeful based on these replies.

Maybe the best (as in fastest) will be to change it to a slider like that of the sound setting and call it a day.

Edit: yeah, not messing with that.

 

[osanaiko]

Not sure how much html/js experience you have, but even if you are unfamiliar with those languages, using one of select replacement libraries is actually not quite as hard as it seems.

1. Find one that is stand alone, not part of a framework like react or whatever.
2. follow their docs to pull in the js library in the header, and
3. follow the instructions on how to build the element and style it

 

[Satori6]

Not sure how much html/js experience you have, but even if you are unfamiliar with those languages, using one of select replacement libraries is actually not quite as hard as it seems.

1. Find one that is stand alone, not part of a framework like react or whatever.
2. follow their docs to pull in the js library in the header, and
3. follow the instructions on how to build the element and style it

I feel quite confident with my JS at the moment - so far I've fortunately been able to do everything I've set out to with it.

I managed to change the style after reading the document that you linked:

But I don't want to go through the trouble of having to make sure that it works on all browsers or to add extra libraries when a slider will do.

I'll definitely play around with it when I have some free time, but I don't want to spend more time on some setting that the players will probably interact once with, if at all.