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)
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
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.
Keep in mind that there is no guarantee that the stylesheet option is available for all elements. Some could be missing.