How to change Select color, similar to Dropdown

Community Support
1

with a Dropdown you can choose the color to a limited extent with button_type:

from bokeh.io import show
from bokeh.models import CustomJS, Dropdown

menu = [("Item 1", "item_1"), ("Item 2", "item_2"), None, ("Item 3", "item_3")]

dropdown = Dropdown(label="Dropdown button", button_type="warning", menu=menu)
dropdown.js_on_event("menu_item_click", CustomJS(code="console.log('dropdown: ' + this.item, this.toString())"))

show(dropdown)

but no such kwarg exists for Select:

from bokeh.io import show
from bokeh.models import CustomJS, Select

select = Select(title="Option:", value="foo", options=["foo", "bar", "baz", "quux"])
select.js_on_change("value", CustomJS(code="""
    console.log('select: value=' + this.value, this.toString())
"""))

show(select)

i’ve tried to achieve something similar for Select using Styles, but none of the color fields there control the box itself, just the text above or the background.

with bokeh v2 i could set the css_styles field of Select to ['changed'] with a static/css/styles.css like this:

.changed .bk-input {
    background-color: #FFA500 !important;
}

but that no longer works in v3.

there’s got to be a way to do this, right? how?? thanks.

2

All Bokeh content was encapsulated in a shadow DOM since version 3.0 and the easiest way to deal with that is to use provided APIs. Please see

and refer to examples in the repo (e.g. this one) that use those APIs and see if that points you in the right direction.

Otherwise, AFAIK to use stylesheets directly will require adding the :host specified. You can search the repo and this forum for :host or “shadow dom” to start.

cc @mateusz for any additional comments.

3

Stylesheets usually are the best option, e.g.:

select = w.Select(
    value="Option 1",
    options=[
        "Option 1",
        "Option 2",
        "Option 3",
    ],
    stylesheets=[
        ".bk-input { background-color: #FFA500; }",
    ],
)

This will change the background of the <select> element within the component. If you want to change the background of the entire component, then use:

    stylesheets=[
        ":host { background-color: #FFA500; }",
    ],
4

awesome, thanks!

but is there a way to dynamically update the style? after i create the Select object, say i subsequently change stylesheet. the display doesn’t update. even if i use add_next_tick_callback.

show(select) # as defined in the preceding post
select.stylesheets = [".bk-input { background-color: #222222; }"]
5

wait, the problem is that i simultaneously disable it, and so the disabled color is displayed, not the new value i set to background-color:

show(select) # as defined two posts above
select.disabled = True
select.stylesheets = [".bk-input { background-color: #222222; }"]

digging through the DOM in my browser, i found:

:host {
    --bokeh-icon-color: #a1a6a9;
    --bokeh-icon-color-disabled: #d4d9db;
}

but setting the disabled color has no effect:

select.stylesheets = [":host { --bokeh-icon-color-disabled: #222222; }"]

what’s the correct way to set the disabled color?

6

You have people way more knowledgeable about this than me already replying, but I think you can accomplish this → there is a bokeh model InlineStyleSheet .

So in theory (someone please correct me if I’m wrong), you could…

  1. Instantiate a bunch of InlineStyleSheet models, each with their own css;
  2. pass them into the CustomJS as args
  3. In the CustomJS code (triggering when user does something etc.), set the target widget/thing’s stylesheets attribute with the appropriate InlineStylesheet model.
7

only works for tool button icons. We are currently in the process in defining a CSS variable based theming system for bokehjs, hopefully this will be available in bokeh 3.7.

For now this should work:

select.stylesheets = [".bk-input:disabled { background-color: #222222; }"]
1 Like