Change colour of pickerInput items in Shiny

Question

Following on from this example can someone please tell me if it's possible and how to change the colour of the font of the items in the drop down menu of the pickerInput UI from the shinyWidgets package?

Here is a short example of the widget:

library("shiny")
library("shinyWidgets")

shinyApp(
  ui = 
    shinyUI(fluidPage(
      sidebarLayout(
        sidebarPanel(
          pickerInput("select", label=NULL,
                      choices=LETTERS,
                      selected = LETTERS,
                      multiple=TRUE, 
                      options = list(
                        `actions-box` = TRUE,
                        size = 10,
                        `selected-text-format` = "count > 3"
                      ))
          ),
        mainPanel())
    )
    ),
  server = function(input, output){}
)

> sessionInfo()
R version 4.0.0 (2020-04-24)
Platform: x86_64-apple-darwin17.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/4.0/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   base     

other attached packages:
 [1] shinyWidgets_0.5.3  dendextend_1.13.4   tidyr_1.1.0         patchwork_1.0.1     ggplot2_3.3.1      
 [6] shinyhelper_0.3.2   colorspace_1.4-1    colourpicker_1.0    shinythemes_1.1.2   DT_0.13            
[11] dplyr_1.0.0         shiny_1.4.0.2       MSnbase_2.14.2      ProtGenerics_1.20.0 S4Vectors_0.26.1   
[16] mzR_2.22.0          Rcpp_1.0.4.6        Biobase_2.48.0      BiocGenerics_0.34.0

Pork Chop · Accepted Answer · 2020-08-05T14:11:17.083

You can apply the style you want in its arguments:

library(shiny)
library(shinyWidgets)

col.list <- c("red","blue","green","orange")

# Change the color
colors <- paste0("color:",col.list,";")

# Change the font
colors <- paste0(colors,"font-family: Arial;")

# Change to bold
colors <- paste0(colors,"font-weight: bold;")

ui <- fluidPage(
    pickerInput("col", "Colour", multiple=T, choices = col.list, 
                choicesOpt = list(
                    style = colors)
    )
)

server <- function(input, output){}

shinyApp(ui, server)

To change the background simply apply the background

library(shiny)
library(shinyWidgets)
col.list <- c("red","blue","green","orange")
#Change the color
colors <- paste0("background:",col.list,";")
#Change the color
colors <- paste0(colors,"color:white;")
#Change the font
colors <- paste0(colors,"font-family: Arial;")
#Change to bold
colors <- paste0(colors,"font-weight: bold;")

ui <- fluidPage(
    pickerInput("col", "Colour", multiple=T, choices = col.list, 
                choicesOpt = list(
                    style = colors)
    )
)

server <- function(input, output){}

shinyApp(ui, server)

To use the colors dynamically you can do the folowing:

library(shiny)
library(shinyWidgets)
col.list <- c("red","blue","green","orange")

ui <- fluidPage(
  column(2,
         pickerInput("change", "Select Colour", choices = col.list,multiple = FALSE)
  ),
  column(2,
         pickerInput("col", "Colour", multiple=T, choices = col.list)
  )
)
server <- function(input, output,session){

  observeEvent(input$change,{
    
    colors <- rep(paste0("color:",input$change,";"),length(col.list))
    updatePickerInput(session, "col", choices = col.list,
                      choicesOpt = list(
                        style = colors
                      )
    )
  })
  
}

shinyApp(ui, server)

This is great. The object `colors` in my own code (not the example here) is dynamic and it is set by the user from a colour picker inside my app. Thus `colors` is a `reactive` object which I can pass from server using 'renderUI' and then call in the UI using `uiOutput("colors")`. Which does not work. I may have to ask a new question on how to pass it dynamically. — lmsimp, Aug 05 '20 at 13:24
@PorkChop: how do you change the background color of the selection box itself? Thanks — Tung, Sep 22 '21 at 01:00

score 4 · Answer 2 · answered Aug 05 '20 at 00:43

Try adding

tags$head(
      tags$style(HTML("
        .dropdown-menu a{
            color: red !important;
        }
  "))

Is this what you're looking for?

  ui = 
    shinyUI(fluidPage(tags$head(
      tags$style(HTML("
         .dropdown-menu a{
          color: red !important;
         }
  "))
    ),
      sidebarLayout(
        sidebarPanel(
          pickerInput("select", label=NULL,
                      choices=LETTERS,
                      selected = LETTERS,
                      multiple=TRUE, 
                      options = list(
                        `actions-box` = TRUE,
                        size = 10,
                        `selected-text-format` = "count > 3"
                      ))
        ),
        mainPanel())
    )
    )
server = function(input, output){}

shinyApp(ui, server)

Would it be possible to edit the answer to make it clear how to colour code individual letters. This example only shows how to colour **all** items in the dropdown menu the same colour. Thank you! — lmsimp, Aug 05 '20 at 12:42

Change colour of pickerInput items in Shiny

2 Answers2

Linked