如何修改Shiny中shinyWidgets的pickerInput组件optgroup的颜色与背景

你提供的原始Shiny应用代码如下：

library(shiny)
library(shinyWidgets)
shinyApp(server = function(input, output){},
         ui=fluidPage(
           pickerInput("pick1", "Select", choices =  list(a=1:2, b=3:4)))
)

你尝试过通过给pickerInput添加自定义类来修改样式，但这种方法对分组标题（optgroup）无效，最终需求是修改这些分组标题的文字颜色或背景色。

解决方案 #

要修改分组标题的样式，需要直接针对下拉菜单中分组标题对应的CSS类写样式规则——因为分组标题是picker下拉菜单内的独立元素，不会继承主picker元素的样式。

完整示例代码

library(shiny)
library(shinyWidgets)

shinyApp(
  server = function(input, output){},
  ui = fluidPage(
    tags$head(
      tags$style(HTML("
        /* 全局修改所有pickerInput的分组标题样式 */
        .bootstrap-select .dropdown-menu .dropdown-header {
          color: #ff4500; /* 橙红色文字 */
          background-color: #f5f5f5; /* 浅灰色背景 */
          font-weight: 600; /* 可选：设置文字粗细 */
        }
        
        /* 仅修改id为pick1的pickerInput的分组标题样式（可选） */
        #pick1 + .bootstrap-select .dropdown-menu .dropdown-header {
          color: #1e90ff; /* 蓝色文字 */
          background-color: #e6f7ff; /* 淡蓝色背景 */
        }
      "))
    ),
    pickerInput("pick1", "Select", choices = list(a=1:2, b=3:4)),
    pickerInput("pick2", "另一个选择器", choices = list(c=5:6, d=7:8))
  )
)

说明 #

1. CSS选择器说明：

   • .bootstrap-select .dropdown-menu .dropdown-header：定位所有pickerInput下拉菜单中的分组标题元素
   • #pick1 + .bootstrap-select .dropdown-menu .dropdown-header：仅定位id为pick1的pickerInput对应的分组标题，避免影响其他picker

2. 你之前的方法无效的原因：options = list(style = "my-class")是给picker的主容器添加类，而分组标题是下拉弹窗内的子元素，不会继承这个类的样式，必须直接针对子元素的类设置样式。

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