Элемент стиля по номеру индекса в 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 селектор для первого элемента с классом Я вижу несколько вариантов:

• перезаписывая первое совпадение оператором (~), но как мне тогда сделать это для второго и третьего элемента?
• :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)