Shiny中pickerInput自定义背景色与字体颜色问题

直接在pickerInput的options里设置style属性可能无法完全覆盖组件的默认Bootstrap样式，因为selectpicker生成的按钮元素有自带的样式优先级。你可以通过自定义CSS来精准控制样式：

修改后的完整代码 #

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  # 自定义CSS样式
  tags$style(HTML("
    #brand + .bootstrap-select .btn {
      background-color: #eaeaea !important;
      color: black !important;
      font-weight: bold !important;
      border: none; /* 可选：去掉默认边框 */
    }
    #brand + .bootstrap-select .btn:hover {
      background-color: #d5d5d5 !important; /* 可选：hover状态的背景色 */
    }
  ")),
  
  pickerInput(
    inputId = "brand",
    label = "Brand", 
    choices = c("Kanzler", "Other Brand 1", "Other Brand 2"), 
    selected = "Kanzler",
    options = list(
      `actions-box` = TRUE
    ),
    multiple = TRUE
  )
)

server <- function(input, output) {}

shinyApp(ui, server)

关键说明 #

• 使用#brand + .bootstrap-select .btn选择器：精准定位到inputId为brand的pickerInput对应的按钮元素，避免影响其他pickerInput组件。
• 添加!important：确保自定义样式优先级高于默认Bootstrap样式，强制生效。
• 可选的hover状态样式：提升交互体验，你可以根据需求调整或移除。

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