change pickerinput background color

Question

pickerInput(
   inputId = "brand",
   label = "Brand", 
   choices = unique(df1$Brand), 
   selected = "Kanzler",
   options = list(
      `actions-box` = TRUE,
      style = "background-color: #eaeaea; color: black; font-weight: bold;"
   ),
   multiple = TRUE
)

this is my code for pcikerinput in shiny then i want to change the background color, if i change it to style = "btn-primary" it worked perfectly the picker input changed to blue but i want to use custom color like #eaeaea and the font color to black

Expected result :

but with custom color

score 2 · Accepted Answer · answered Apr 04 '23 at 20:31

Here is a way for you to do this with CSS.

Example Image

Code

# Changing the style of a pickerInput

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  # insert the CSS that changes the color of the .brand-picker
  tags$head(
    tags$style(
      "
      .brand-picker button.btn.dropdown-toggle.btn-default {
        background-color: #eaeaea;
        color: black;
        font-weight: bold;
      }
      "
    )
  ),
  
  tags$div(
    shinyWidgets::pickerInput(
      inputId = "brand",
      label = "Brand",
      choices = letters,
      selected = "a",
      options = list(`actions-box` = TRUE),
      multiple = TRUE
    ),
    # add a class to this specific picker, just in case you don't want ALL
    # of your pickers to be this color
    class = "brand-picker"
  )
)

server <- function(input, output, session) {
  
}

shinyApp(ui, server)

If you don't want to include the long CSS at the beginning of your ui, you can also create a separate www/style.css file located in the same directory as your app.R file. You can then include this css with shiny::includeCSS. See the documentation for more details (link)

change pickerinput background color

1 Answers1

Example Image

Code