Style element by index number in R Shiny

Question

I want to color elements according to their index number in R Shiny (first match blue, second yellow, third red).

Reproducible example:

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)

What i tried:

According to: CSS selector for first element with class i see a few Options:

overwriting with the first match with the (~) Operator, but how would i do that for the second and third element then?
:nth-of-type(1) -> i cant get that running, see example above.

`nth-of-type(n)` selects the n-th element of some elements *with a common parent*. I don't know a CSS solution for your problem. There's a JavaScript solution. — Stéphane Laurent, Mar 06 '20 at 10:47
i would be open for a js solution as well! forgot to mention that,.. — Tlatwork, Mar 06 '20 at 12:38

score 1 · Accepted Answer · answered Mar 06 '20 at 12:48

I don't know a CSS solution. Here is a JavaScript solution:

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)

Style element by index number in R Shiny

1 Answers1