如何更改shinyWidgets包的pickerInput字体大小

Question

在一个闪亮的应用程序中，我使用的是shinyWidgets包中的pickerInput。我希望在较大的屏幕(台式机、笔记本电脑)上使用大字体，在较小的屏幕(智能手机、iPhone)上使用较小的字体。我试过这个：

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)

字体的调整应包括标题('Choose ...')和选项("a"，"b"，"c")。

不幸的是，给定的代码不起作用，标题是HTML代码，选项根本不受影响。

有谁有什么想法吗？

Answer 1

占位符的CSS选择器是.bootstrap-select > .dropdown-toggle。要为选项设置类，可以使用choicesOpt中的content选项，如下所示。

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)