在R Shiny中更改selectInput的背景颜色

Question

我的示例代码：

library(shiny)

server <- function(input, output) {
}

ui <- fluidPage(
  br(),
  selectInput("select1", "Choose: ", c("Alt1.1", "Alt1.2"), selected = c("Alt1.1"), selectize = FALSE, multiple = TRUE),
  br(),
  selectInput("select2", "Choose: ", c("Alt2.1", "Alt2.2"), selected = c("Alt2.1"), selectize = FALSE, multiple = TRUE)
)

shinyApp(ui = ui, server = server)

如何更改代码，以使小部件的背景颜色为select1为红色，select2为蓝色？

修改

我试过了：

div(selectInput("select1", "Choose: ", c("Alt1.1", "Alt1.2"), selected = c("Alt1.1"), selectize = FALSE, multiple = TRUE), style = "background-color: red")

但这不是我要找的！相反，我希望选项的背景是红色的！

Answer 1

  

按照以下评论的要求编辑

您可以通过样式标记添加CSS，如下所示：

library(shiny)

server <- function(input, output) {
}

ui <- fluidPage(
  br(),
  tags$style("#select1 {border: 2px solid #dd4b39;}"),
  selectInput("select1", "Choose: ", c("Alt1.1", "Alt1.2"), selected = c("Alt1.1"), selectize = FALSE, multiple = TRUE),
  br(),
  tags$style("#select2 {background-color:blue;}"),
  selectInput("select2", "Choose: ", c("Alt2.1", "Alt2.2"), selected = c("Alt2.1"), selectize = FALSE, multiple = TRUE)
)

shinyApp(ui = ui, server = server)

Answer 2

您可以将以下内容添加为fluidPage的最后一个参数：

    tags$style(
        HTML('
                          #select1{
                          background-color: #ff0000;
                          }
                          #select2{
                          background-color: #0000ff;
                          }
                          '
        )
    )

这样您就可以在应用中添加自定义CSS。将此传递给fluidPage应该可以完成小的更改，但是如果使用CSS调整大量元素，您可能会发现将.css文件保存到应用的www目录中会更容易