Change colour of pickerInput items in Shiny

问题

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

回答1:

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)

回答2:

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)

来源：https://stackoverflow.com/questions/63255906/change-colour-of-pickerinput-items-in-shiny