Change colour of pickerInput items in Shiny

user_2610905 0
Viewed 1146

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
shiny r css
2 Answers

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)

enter image description here

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)

enter image description here

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)

enter image description here

user_27535260

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)
user_138740360
Related