Programmatically change colors of some Bootstrap 4 Select items

1

Is there a way to programmatically change colors of some items in a Bootstrap 4 Select?

2

Thought I’d ping one more time before dropping it. Had to revert to a jQWidget to get that done. Couldn’t get it done with a BS 4 Select. ?

3

Seems to work for most types of menus/lists:

("#Select1_1").css("background-color", "darkorange") ("#Select1_1").css(“color”, “white”)

“_1” etc = item number

4

Ok, that brings me much closer. Thank you so much.

The ultimate would be to set these colors As I am loading the Select. I am adding items one at a time, and ideally, on each add, I would set the color. Is there a way to do that?

5

Dosn’t using ("#Select1_" & item_no).css(“background-color”, “darkorange”) as you add the items do it?.

1 Like
6

I guess I am being dense.

I looked for a way right from the additem and there wasn’t:
addItem( text , value , selected , disabled )

but yeah, I guess there is nothing stopping me from doing this with lines for each - one for the add, one for the color. Thank you.

7

It does indeed work. Thank you.

8

So this has all worked nicely, but I now have a new challenge.

When I custom color items in the list, they render great in a PC web browser, but rendered on the mobile phone browser, the colors are gone. On a mobile browser, Bootstrap has two renderings - one with the control on the form and a second, large, spinner rendering that pops up when focus is on the control. The large spinner rendering does Not have the color. Anyone know anything about this?

9

No answer, but maybe a technique which will help.

If you’re using an Android device, connect to it using the Chrome Remote Debugging tool.

You can then right click on the Select and choose Inspect. You will be able to see the HTML and CSS which control the appearance of the Select.

10

I couldn’t get your code to work but I did have success with…

Select1.children[0].children[0].children[0].children[1][x].style.backgroundColor = "lightskyblue"

x = row you want to change the colour of.

Update: Doesn’t seem to work on mobile devices unfortunately. Chrome PC works well though.