Search code examples
rshinyshinywidgets

Change styling of shinyWidgets pickerInput

Assuming this shiny app, how to change the color of the list names a & b (aka dropdown-menus aka optgroup)

library(shiny)
library(shinyWidgets)
shinyApp(server = function(input, output){},
         ui=fluidPage(
           pickerInput("pick1", "Select", choices =  list(a=1:2, b=3:4)))
)

In general I can change the appearance of the input text using:

shinyApp(server = function(input, output){},
         ui=fluidPage(
           tags$head(tags$style(".my-class {font-size: 200%;}")), 
           pickerInput("pick1", "Select", choices =  list(a=1:2, b=3:4), 
                                  options = list(style = "my-class")))
)

But this is neither working for "dropdown-menu inner" nor "dropdown-header optgroup-1" nor "optgroup", etc...

shinyApp(server = function(input, output){},
         ui=fluidPage(
           tags$head(tags$style(".my-class dropdown-menu inner{font-size: 200%;}")), 
           pickerInput("pick1", "Select", choices =  list(a=1:2, b=3:4), 
                                  options = list(style = "my-class")))
)

In the end I want to change the text color or the backgroud of the headings.

Solution

  • When targeting a CSS class, make sure to use a . in front of the class name. Here is an example that changes the dropdown headers' text color and background color.

    shinyApp(server = function(input, output){},
         ui=fluidPage(
           tags$head(tags$style("button.my-class + div div ul li.dropdown-header{color: #0000ff;
                                                  background-color: #ff0000}")), 
           pickerInput("pick1", "Select", choices =  list(a=1:2, b=3:4), 
                       options = list(style = "my-class")),
           pickerInput("pick1", "Select", choices =  list(a=1:2, b=3:4), 
                       options = list(style = "other-class")))
)