如何将内联 CSS 格式应用于 Bokeh Select 小部件？

Question

我正在尝试使 Bokeh 中的选择下拉列表更大，并使用更大的文本和不同的颜色（如果可能）。

有没有办法使用内联样式表或类似的方法来做到这一点？

我已经尝试了下面的各种代码和其他代码，但我想我一定做错了什么。 也许我没有正确的格式 .bk-select 或类似的格式？

（我使用 Bokeh 创建 html 网页，但使用 colab 笔记本进行测试）。

如果可能的话，我宁愿不必创建新文件，而是将其保留在主Python代码中。

如有任何帮助，我们将不胜感激。 非常感谢！！！

我尝试过的一些代码（除其他外）如下：

Bokeh 文档中的滑块代码运行良好：

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)

此代码（为“选择”编辑它）不起作用（创建一个选择下拉列表，但没有格式设置）：

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)

这也不起作用（创建一个选择下拉列表但没有格式）：

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)

Answer 1

您的样式错误，可能是不存在的 css 组。正确的组可能是

bk-input

。

对于下面的最小示例

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)

bokeh 3.5.1 的输出是

提示

如果您不知道要设置样式的 css 组或元素的名称，可以使用检查器工具。大多数现代浏览器都有一个。只需打开浏览器控制台并寻找正确的工具，大多数符号是光标。

评论

请记住，不能保证样式表选项适用于所有元素。有些可能会丢失。