rshinyshinywidgets

change pickerinput background color


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 :

enter image description here

but with custom color


Solution

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

    Example Image

    enter image description here

    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)