如何修改shinyWidgets下拉菜单（非按钮）的背景颜色？

要调整shinyWidgets里dropdown展开后的菜单颜色，确实需要通过CSS来定位对应的菜单元素——你之前用#dropdown修改的其实是下拉按钮本身，而我们要找的是展开后的菜单容器。

解决方案 #

shinyWidgets的dropdown展开菜单对应的CSS类是.dropdown-menu，如果只想修改你这个指定inputId="dropdown"的下拉菜单，可以用相邻兄弟选择器来关联按钮和它对应的菜单，这样不会影响页面上其他的dropdown。

我修改了你的示例代码，添加了针对菜单背景、文字颜色和hover状态的样式：

library(shiny)
library(shinyWidgets)

n <- 200

ui <- bootstrapPage(
  numericInput('n', 'Number of obs', n),
  dropdown(
    tags$h4("Advanced"),
    icon = icon("gear"),
    status = "primary",
    width = "600px",
    inputId="dropdown"
  ),
  tags$style(HTML('
    /* 修改展开后的菜单背景色 */
    #dropdown ~ .dropdown-menu {
      background-color: #ffcccc; /* 这里可以替换成你想要的颜色，比如red、#00ff00等 */
    }
    /* 可选：修改菜单选项的文字颜色，避免和背景色冲突 */
    #dropdown ~ .dropdown-menu .dropdown-item {
      color: #333;
    }
    /* 可选：修改鼠标悬停在选项上的背景色 */
    #dropdown ~ .dropdown-menu .dropdown-item:hover {
      background-color: #ff9999;
    }
  ')),
  plotOutput('plot')
)

server <- function(input, output) {
  output$plot <- renderPlot({
    hist(runif(input$n))
  })
}

shinyApp(ui = ui, server = server)

代码解释 #

• #dropdown ~ .dropdown-menu：选中id为dropdown的下拉按钮之后的.dropdown-menu元素（也就是展开的菜单容器），设置它的背景色。
• .dropdown-item：菜单里的每个选项元素，修改文字颜色可以保证内容在新背景下清晰可读。
• .dropdown-item:hover：定义鼠标悬停在选项上时的样式，提升交互体验。

你可以根据需求调整颜色值，支持十六进制颜色码、RGB或者直接用颜色名称（比如red、blue）。

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