change colour of selectizeInput options in R Shiny

Question

I would like to change the colour of each individual option of the selectizeInput menu in my Shiny app. In the following example code below I am able to change the colour to blue for all the menu options but how can I change it for each individual option? e.g. make "a" red, "b" blue, "c" green etc.

Thanks very much!

shinyApp(
  ui = 
    shinyUI(fluidPage(
      tags$head(
        tags$style(HTML("
     .item {
       background: #2196f3 !important;
       color: white !important;
     }
     .selectize-dropdown-content .active {
       background: #2196f3 !important;
       color: white !important;
     }
  "))
      ),
      sidebarLayout(
        sidebarPanel(
          selectizeInput("select", label=NULL,
                         choices=c("a", "b", "c", "d"),
                         selected = c("a", "b", "c", "d"),
                         multiple=TRUE, options=list(placeholder="Wybierz"))),
        mainPanel())
    )
    ),
  server = function(input, output){}
)

> sessionInfo()
R version 3.6.3 (2020-02-29)
Platform: x86_64-apple-darwin15.6.0 (64-bit)
Running under: macOS High Sierra 10.13.6

Matrix products: default
BLAS:   /System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libBLAS.dylib
LAPACK: /Library/Frameworks/R.framework/Versions/3.6/Resources/lib/libRlapack.dylib

locale:
[1] en_GB.UTF-8/en_GB.UTF-8/en_GB.UTF-8/C/en_GB.UTF-8/en_GB.UTF-8

attached base packages:
[1] stats4    parallel  stats     graphics  grDevices utils     datasets  methods  
[9] base     

other attached packages:
 [1] rsconnect_0.8.16     shinythemes_1.1.2    dplyr_0.8.5          shiny_1.4.0.2       
 [5] BiocParallel_1.20.1  MLInterfaces_1.66.5  cluster_2.1.0        annotate_1.64.0     
 [9] XML_3.99-0.3         AnnotationDbi_1.48.0 IRanges_2.20.2       MSnbase_2.12.0      
[13] ProtGenerics_1.18.0  S4Vectors_0.24.4     mzR_2.20.0           Rcpp_1.0.4.6        
[17] Biobase_2.46.0       BiocGenerics_0.32.0 

Answer 1

More flexible approach. Without coding colors for a and b in css.

library(shiny)
library(stringi)

t1 <- tibble(choices = stringi::stri_rand_strings(200, 5), 
             group = stri_rand_strings(200, 1, pattern = "[AB]")) %>%
  mutate(html=ifelse(group=='A',paste0("<span style='color:red';>",choices,"</span>"),
                     paste0("<span style='color:blue';>",choices,"</span>")
  ))

items <- setNames(t1$choices, t1$html)


runApp(shinyApp(
  
  ui = fluidPage(
    
    
    selectizeInput("id", "Label", choices = items, multiple = TRUE,
                   options = list(render = I("
  {
    item: function(item, escape) { return '<div>' + item.label + '</div>'; },
    option: function(item, escape) { return '<div>' + item.label + '</div>'; }
  }"))) 
    
  ),
  
  server = function(input, output, session) {
    
  }
  
))

copied from https://community.rstudio.com/t/selectinput-conditional-formatting/81563/2

Answer 2

Replacing my code with the above suggested code changed the drop down menu colour but NOT the individual items in the menu:

shinyApp(
  ui = 
    shinyUI(fluidPage(
      tags$head(
        tags$style(HTML("
        .option[data-value=a] {
          background: red !important;
          color: white !important;
        }
        .option[data-value=b] {
          background: green !important;
          color: white !important;
        }
  "))
      ),
      sidebarLayout(
        sidebarPanel(
          selectizeInput("select", label=NULL,
                         choices=c("a", "b"),
                         selected = c("a", "b"),
                         multiple=TRUE, options=list(placeholder="Wybierz"))),
        mainPanel())
    )
    ),
  server = function(input, output){}
)

SOLUTION In order to achieve both items colour coded and the drop down. I needed to add .item to my code

shinyApp(
  ui = 
    shinyUI(fluidPage(
      tags$head(
        tags$style(HTML("
        .option[data-value=a], .item[data-value=a]{
          background: red !important;
          color: white !important;
        }
        .option[data-value=b], .item[data-value=b]{
          background: green !important;
          color: white !important;
        }
  "))
      ),
      sidebarLayout(
        sidebarPanel(
          selectizeInput("select", label=NULL,
                         choices=c("a", "b"),
                         selected = c("a", "b"),
                         multiple=TRUE, options=list(placeholder="Wybierz"))),
        mainPanel())
    )
    ),
  server = function(input, output){}
)

This results in both the menu and drop down menu being coloured.

Answer 3

You can do:

.option[data-value=a] {
  background: red !important;
  color: white !important;
}
.option[data-value=b] {
  background: green !important;
  color: white !important;
}
.option[data-value=c] {
  background: blue !important;
  color: white !important;
}
.option[data-value=d] {
  background: magenta !important;
  color: white !important;
}