csswidgetbokeh

How can I apply inline CSS formatting to a Bokeh Select widget?


I'm trying to make my select dropdowns in Bokeh much larger with larger text and different colours (if possible).

Is there a way to do this using an inline stylesheet or similar?

I have tried the various code below and other but I think I must be doing something wrong. Perhaps I don't have the correct format .bk-select or similar?

(I'm using Bokeh to create html web pages but for testing using colab notebook).

I would prefer not to have to make new files if possible and just keep it in the main python code.

Any help is appreciated. Thanks very much!!!

Some of the code I have tried (among other things) below:

This code for a slider from the Bokeh docs works fine:

from bokeh.models import InlineStyleSheet, Slider

stylesheet = InlineStyleSheet(css=".bk-slider-title { background-color: green; }")

slider = Slider(value=10, start=0, end=100, step=0.5, stylesheets=[stylesheet])

layout = row([slider], sizing_mode='stretch_width', width=400, height=400)
output_notebook()
show(layout)

This code (editing it for Select) doesn't work (creates a select dropdown but no formatting):

stylesheet = InlineStyleSheet(css=".bk-select{ background-color: green; }")

select = Select(title='Option 1', value='example2', options=Data, stylesheets=[stylesheet])

layout = row([select], sizing_mode='stretch_width', width=400, height=400)
output_notebook()
show(layout)

This also doesn't work (creates a select dropdown but no formatting):

from bokeh.layouts import row
from bokeh.models import InlineStyleSheet, Select
from bokeh.plotting import show, output_notebook

stylesheet = """
    .bk-select{
        color: #ff0000;
        font-weight: bold;
    }
"""

Data = ['example0', 'example1', 'example2']
select = Select(title='Option 1', value='example2', options=Data,  stylesheets = [stylesheet]) #css_classes=['custom_select']
select2 = Select(title='Option 2', value='example1', options=Data)


select2.stylesheets = [stylesheet]

layout = row([select, select2], sizing_mode='stretch_width', width=400, height=400)
output_notebook()
show(layout)

Solution

  • You are styling the wrong, maybe a not exsting, css group. The correct group could be bk-input.

    For the minimal example below

    from bokeh.plotting import output_notebook, show
    from bokeh.models import InlineStyleSheet, Slider
    output_notebook()
    
    stylesheet = """
    .bk-input{
        color: #ff0000;
        font-weight: bold;
        background-color: #cccccc;
    }
    """
    select = Select(
        title='Option 1',
        value='example2',
        options=['example0', 'example1', 'example2'], 
        stylesheets = [stylesheet]
    )
    
    show(select)
    

    the output with bokeh 3.5.1 is

    styled select button

    Hint

    If you don't know the name of the css group or element you want to style, you can make use of the inspector tool. Most modern browsers have one. Just open the browser console and look for the correct tool, mostly the symbol is a cursor.

    Comment

    Keep in mind that there is no guarantee that the stylesheet option is available for all elements. Some could be missing.