如何为Python Bokeh包中的按钮自定义颜色样式

问题分析 #

你遇到的核心问题：

• 使用css_classes绑定自定义样式时未生效，多是因为CSS选择器错误或样式未正确加载
• 使用styles参数时，修改的是按钮外层容器的样式，而非按钮本身的样式

方法一：通过css_classes + 自定义CSS（推荐） #

1. 确保样式正确加载 #

• Bokeh Server应用：将CSS文件放在项目的static目录下，在代码中加载：

  curdoc().add_style_file("styles.css")
  

• 静态HTML输出：使用CustomCSS模型直接注入样式，无需额外文件。

2. 编写正确的CSS选择器 #

原选择器层级冗余且优先级不足，改用精准的选择器：

/* 基础按钮样式 */
.custom_button_bokeh .bk-btn {
  background-color: #00448a; /* 按钮背景色 */
  border-color: #003366;     /* 按钮边框色 */
  color: white;              /* 按钮文字色 */
}

/* 鼠标悬停样式 */
.custom_button_bokeh .bk-btn:hover {
  background-color: #0055aa;
}

3. Python代码绑定样式类 #

from bokeh.models import Button
from bokeh.io import curdoc  # Bokeh Server场景
# 静态输出用 from bokeh.io import output_file, show

button = Button(label="Testing CSS", css_classes=["custom_button_bokeh"])

# Bokeh Server场景
curdoc().add_root(button)

# 静态HTML输出场景
# output_file("custom_button.html")
# show(button)

方法二：静态输出时直接注入样式（无需外部CSS文件） #

如果仅生成静态HTML，可直接用stylesheets属性注入CSS：

from bokeh.models import Button, CustomCSS
from bokeh.io import output_file, show

button = Button(label="Inline Style Test")

# 定义自定义样式
custom_css = CustomCSS(code="""
.bk-btn {
  background-color: #00448a;
  border-color: #003366;
  color: white;
}
""")

# 绑定样式到按钮
button.stylesheets = [custom_css]

output_file("inline_button.html")
show(button)

为什么之前的styles参数没生效？ #

Bokeh的Button组件的styles参数作用于按钮的外层容器div，而非内部的按钮元素（.bk-btn）。所以你看到的是容器的背景色，而非按钮本身。要修改按钮元素，必须通过CSS选择器定位到.bk-btn。

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