css - 在闪亮中自定义 selectInput 的背景颜色

Question

考虑以下简单的闪亮应用程序：

library(shiny)

ui <- fluidPage(tags$head(includeCSS("www/mycss.css")),
  selectInput("foo", "Choose", width = '20%',
               multiple = F, selected = "red1", 
               choices = list(red = c("red1", "red2"),
                              green = c("green1", "green2")), 
               selectize = F))

server <- function(input, output) {}
shinyApp(ui = ui, server = server)

该文件mycss.css位于一个www目录中，包含以下内容：

#foo optgroup[label = "red"]{
  color: #990000;
}

#foo optgroup[label = "green"]{
  color: #009900;
}

我想进一步添加 css 来自定义selectInput. 目前，悬停时项目的背景颜色是蓝色，我想分别为每个组选择自定义悬停颜色。

我尝试了几件事，#foo optgroup[label = "green"]:hover但失败了。任何帮助表示赞赏。

标签： cssrshiny

Answer 1

这可以selectize = TRUE通过 css 属性选择器实现：

library(shiny)

ui <- fluidPage(tags$head(includeCSS("www/mycss.css")),
            selectInput("foo", "Choose", width = '20%',
                        multiple = F, selected = "red1", 
                        choices = list(red = c("red1", "red2"),
                                       green = c("green1", "green2")), 
                        selectize = T))

server <- function(input, output) {}
shinyApp(ui = ui, server = server)

css 文件应如下所示：

div[data-value = 'red1'].active, div[data-value = 'red2'].active{
  background-color:#990000 !important;
  color: white;
}
div[data-value = 'red1'], div[data-value = 'red2']{
  color: #990000;
}

div[data-value = 'green1'].active, div[data-value = 'green2'].active{
  background-color:#009900 !important;
  color: white;
}
div[data-value = 'green1'], div[data-value = 'green2']{
  color: #009900;
}