how to change font size for pickerInput of shinyWidgets package

Question

In a Shiny app I am using pickerInput from the shinyWidgets package. I would like to make it so that a large font is used on larger screens (desktop, laptop) and a smaller font on smaller screens (smartphone, iPhone). I tried this:

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  tags$style("@media (max-width: 1000px) { .pClass { font-size: 12; color: green} }
              @media (min-width: 1001px) { .pClass { font-size: 18; color: blue } }"),

  pickerInput(
    inputId    = "pInput", choices = c("a", "b", "c"), multiple = TRUE,

    options    = list(title      = span("Choose ...", class = "pClass"),
                      dropupAuto = FALSE, 
                      container  = 'body'),

    choicesOpt = list(class = rep("pClass", 3))
  )
)

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

shinyApp(ui = ui, server = server)

The adaption of the font should include the title ('Choose...') and the options ("a", "b", "c").

Unfortunately the given code does not work, the title is given as HTML code and the options are not affected at all.

Does anyone have any ideas?

Answer 1

The CSS selector for the placeholder is .bootstrap-select >.dropdown-toggle . To set a class to the options, you can use the content option in choicesOpt , as follows.

library(shiny)
library(shinyWidgets)

CSS <- "
@media (max-width: 1000px) { 
  .bootstrap-select > .dropdown-toggle[title='Choose ...'],
  .bootstrap-select > .dropdown-toggle[title='Choose ...']:hover,
  .bootstrap-select > .dropdown-toggle[title='Choose ...']:focus,
  .bootstrap-select > .dropdown-toggle[title='Choose ...']:active,
  .pClass {
    font-size: 12; 
    color: green;
  }
}
@media (min-width: 1001px) { 
  .bootstrap-select > .dropdown-toggle[title='Choose ...'],
  .bootstrap-select > .dropdown-toggle[title='Choose ...']:hover,
  .bootstrap-select > .dropdown-toggle[title='Choose ...']:focus,
  .bootstrap-select > .dropdown-toggle[title='Choose ...']:active,
  .pClass {
    font-size: 18; 
    color: blue;
  }
}"

pickerChoices <- c("a", "b", "c")

ui <- fluidPage(
  tags$head(tags$style(HTML(CSS))),

  pickerInput(
    inputId    = "pInput", choices = pickerChoices, multiple = TRUE,
    
    options    = list(title      = "Choose ...",
                      dropupAuto = FALSE, 
                      container  = 'body'),
    
    choicesOpt = list(
      content = sprintf("<span class='pClass'>%s</span>", pickerChoices)
    )
  )
  )

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

shinyApp(ui = ui, server = server)