如何为Bokeh Select组件应用内联CSS格式化？

问题需求 #

需要给Bokeh的Select下拉框设置更大尺寸、增大文字尺寸并修改颜色，通过内联样式表实现，无需额外文件，在Colab笔记本的Python代码中完成。之前尝试的代码因类名错误未生效。

原因分析 #

Bokeh的Select组件渲染后，实际DOM结构的类名并非.bk-select，而是由多个子元素组成：

• .bk-input-group：整个Select组件的容器
• .bk-select-input：下拉框的输入文本区域
• .bk-select-button：右侧的下拉箭头按钮
• .bk-title：Select的标题文本

之前的代码使用了错误的类名，导致样式无法应用到目标元素。

正确实现代码 #

以下是可以生效的内联CSS设置，包含尺寸、文字大小、颜色的修改：

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

# 定义内联样式表，针对Select的各个元素
stylesheet = InlineStyleSheet(css="""
    /* 设置整个Select容器的宽度和高度 */
    .bk-input-group {
        width: 300px !important;
        height: 50px !important;
    }
    /* 设置下拉框输入区域的文字样式和内边距 */
    .bk-select-input {
        font-size: 18px !important;
        color: #2c3e50 !important;
        padding: 10px !important;
    }
    /* 设置下拉箭头按钮的样式 */
    .bk-select-button {
        height: 100% !important;
        width: 50px !important;
    }
    /* 设置标题的文字样式 */
    .bk-title {
        font-size: 16px !important;
        color: #e74c3c !important;
    }
""")

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

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

关键说明 #

• 使用!important是为了覆盖Bokeh的默认样式优先级，确保自定义样式生效
• 可以根据需求调整width、height、font-size、color等参数
• 所有样式都通过InlineStyleSheet直接绑定到Select组件，无需额外CSS文件

内容的提问来源于stack exchange，提问作者Shara