css - dropdrop、shinyWidgets 中的背景颜色

Question

如何更改 shinyWidgets 下拉菜单的颜色(不是按钮，而是打开的菜单)。我想，我需要一些 CSS 代码，但我没有太多 CSS 经验。

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 {background-color: red;}')),
  plotOutput('plot')
)

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

shinyApp(ui = ui, server = server)

Answer 1

您可以使用 CSS 选择器 #sw-content-dropdown, .sw-dropdown-in，例如:

library(shiny)
library(shinyWidgets)
n <- 200

ui <- bootstrapPage(

  dropdown(
    tags$h4("Advanced"),
    numericInput('n', 'Number of obs', n),
    icon = icon("gear"),
    status = "primary", width = "600px",
    inputId="dropdown"
  ),
  tags$style(HTML('#sw-content-dropdown, .sw-dropdown-in {background-color: red;}')),
  plotOutput('plot')
)

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

shinyApp(ui = ui, server = server)