如何修改Vega-Lite中bind绑定交互元素的格式（字体、颜色等）？

Vega-Lite里用bind生成的滑块、下拉框这些交互控件，本质是浏览器原生HTML元素，它们的样式（比如标签文字颜色）没法通过Vega-Lite自身的selection配置、title或legend设置来修改——因为这些配置只管控件关联的可视化部分，管不到生成的DOM元素样式。

要改这些样式，直接用CSS就行：

• 修改所有bind控件的标签颜色：
  所有bind生成的标签都会带vega-bind-label类，直接针对这个类写样式：

  .vega-bind-label {
    color: white;
    /* 还可以加其他样式，比如字体大小、加粗 */
    font-size: 14px;
    font-weight: bold;
  }
  

• 只修改特定参数的标签（比如org_Origin）：
  每个标签的for属性会对应你的参数名，用属性选择器精准定位：

  label[for="org_Origin"] {
    color: white;
  }
  

• 修改控件本身的样式（比如下拉框）：
  针对不同类型的控件，用对应的类选择器：

  /* 下拉框样式 */
  .vega-bind select {
    background-color: #2d2d2d;
    color: white;
    border: 1px solid #555;
  }
  
  /* 滑块样式 */
  .vega-bind input[type="range"] {
    accent-color: #4CAF50;
  }
  

怎么应用这些CSS？ #

• 如果是在网页中，把上述代码放到<style>标签里就行；
• 如果是用Vega-Embed嵌入到页面，同样在页面的CSS里添加这些规则；
• 如果是Jupyter Notebook这类环境，可以通过注入HTML的方式添加CSS：

  from IPython.display import HTML
  HTML('''
  <style>
    label[for="org_Origin"] {
      color: white;
    }
  </style>
  ''')
  

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