R Shiny中按索引编号的样式元素

Question

我想根据元素在R Shiny中的索引号为元素着色（第一个匹配蓝色，第二个黄色，第三个红色）。

可复制的示例：

library(shiny)

ui <- fluidPage(
  tags$style(".control-label:nth-of-type(1) {background-color:blue;}"),
  tags$style(".control-label:nth-of-type(2) {background-color:yellow;}"),
  tags$style(".control-label:nth-of-type(3) {background-color:red;}"),

  lapply(
    letters[1:3], 
    FUN = function(name){
      selectizeInput(
        inputId = paste0("type_", name),
        label = paste0(name),
        choices = "a",
        selected = "a",
        multiple = TRUE,
        options = list(create = TRUE)
      )
    }
  )

)

server <- function(input, output, session) {

}

shinyApp(ui, server)

我尝试过的事情：

根据：CSS selector for first element with class我看到一些选项：

• 使用（〜）运算符覆盖第一个匹配项，但是接下来我将如何对第二个和第三个元素进行覆盖？
• :nth-of-type(1)->我无法运行它，请参见上面的示例。

Answer 1

我不知道CSS解决方案。这是一个JavaScript解决方案：

library(shiny)

js <- '
$(document).ready(function(){
  var labels = $(".control-label");
  labels[0].style.backgroundColor = "red";
  labels[1].style.backgroundColor = "green";
  labels[2].style.backgroundColor = "blue";
});
'

ui <- fluidPage(
  tags$head(tags$script(HTML(js))),
  lapply(
    letters[1:3], 
    FUN = function(name){
      selectizeInput(
        inputId = paste0("type_", name),
        label = paste0(name),
        choices = "a",
        selected = "a",
        multiple = TRUE,
        options = list(create = TRUE)
      )
    }
  )

)

server <- function(input, output, session) {}

shinyApp(ui, server)