如何增大Shiny框架中SelectInput内“A”和“B”的字体大小？

你之前给父div设置font-size没生效，是因为Selectize生成的下拉分组标题是独立的DOM元素，不会继承父容器的样式。要修改分组标题（比如示例中的"A"和"B"）的字体大小，需要直接针对Selectize的专属CSS类写样式。

实现方法 #

在Shiny的UI中添加自定义CSS，选中.selectize-dropdown-header类（这是Selectize分组标题的默认类名），设置字体大小即可。如果需要更精准定位（比如只针对某个特定的SelectizeInput），可以结合元素ID编写选择器。

修改后的完整代码 #

library(shiny)

ui <- fluidPage(
  # 添加自定义CSS，设置分组标题字体大小
  tags$style(HTML("
    /* 全局所有Selectize分组标题生效 */
    .selectize-dropdown-header {
      font-size: 20px !important;
      font-weight: bold; /* 可选：加粗标题 */
    }
    
    /* 如果只想针对ID为'id'的SelectizeInput生效，用下面的选择器 */
    /* #id .selectize-dropdown-header {
      font-size: 20px !important;
    } */
  ")),
  numericInput("x", "X", value = 5),
  textOutput("txt"),
  actionButton("button", "Submit"),
  uiOutput("sel")
)

server <- function(input, output, session) {
  asd <- data.frame(Cat1 = c("A", "A", "B", "B"), Cat2 = c("x","y", "x1", "y1"))
  
  y1 <- reactiveValues(a = 0)
  function1 <- function(){
    y1$a = 2 * input$x
  }

  observeEvent(input$button,{
    function1()
  })

  output$txt <- renderText({
    y1$a
  })

  output$sel <- renderUI({
    # 父div的style可移除，CSS已直接作用于分组标题
    selectizeInput("id", "title", choices = lapply(split(asd[, -1], asd$Cat1), as.list))
  })
}

shinyApp(ui, server)

说明 #

• !important用于确保自定义样式覆盖Selectize的默认样式
• 若仅需对特定SelectizeInput生效，使用#你的输入ID .selectize-dropdown-header作为选择器
• 除字体大小外，还可添加颜色、加粗等样式美化分组标题

内容的提问来源于stack exchange，提问作者mapvin vin