如何调整R Shiny中sidebarPanel内控件的文本字体大小？

以下是你提供的sidebarPanel代码片段：

sidebarPanel(
    selectizeInput(
        "s1",
        "Select s1",
        choices = c('A', 'B'),
        multiple = FALSE
    ),
    radioButtons(
        "r1",
        "Select r1",
        choices = c("A", "B", "C")
    ),
    radioButtons(
        "r2",
        "Select r2",
        choices = c("P", "R")
    ),
    selectizeInput(
        "s3",
        "Select s3",
        choices = c('C', 'D'),
        multiple = FALSE
    ),
    selectizeInput(
        "s4",
        "Select s4",
        choices = c('A', 'B'),
        multiple = TRUE
    ),
    actionButton(
        "b1",
        "Enter"
    )
)

两种字号调整需求都可以通过内嵌CSS实现，不需要额外加载第三方包。

全局调整sidebarPanel内所有文本字号（缩小20%） #

Shiny默认基础字号为14px，缩小20%等价于设置字号为默认值的80%，直接在sidebarPanel内加入样式标签，指定样式作用范围为侧边栏容器即可，代码修改如下：

sidebarPanel(
    tags$style(HTML(".sidebar { font-size: 80%; }")),
    # 原有输入控件代码保持不变
    selectizeInput(
        "s1",
        "Select s1",
        choices = c('A', 'B'),
        multiple = FALSE
    ),
    radioButtons(
        "r1",
        "Select r1",
        choices = c("A", "B", "C")
    ),
    radioButtons(
        "r2",
        "Select r2",
        choices = c("P", "R")
    ),
    selectizeInput(
        "s3",
        "Select s3",
        choices = c('C', 'D'),
        multiple = FALSE
    ),
    selectizeInput(
        "s4",
        "Select s4",
        choices = c('A', 'B'),
        multiple = TRUE
    ),
    actionButton(
        "b1",
        "Enter"
    )
)

注意：selectizeInput的下拉弹出层默认是挂载到页面全局body节点下，不在侧边栏容器内，上述样式不会生效到下拉选项。如果需要同步缩小下拉选项字号，把CSS内容替换为以下代码即可：

.sidebar { font-size: 80%; }
.selectize-dropdown { font-size: 80%; }

单独修改单个控件的文本字号 #

如果不需要全局调整，支持给每个selectizeInput、radioButtons单独设置字号，常用两种写法：

• 给目标控件外层套div标签，直接写内联样式
  比如将id为s1的选择框字号缩小20%，id为r1的单选按钮字号设为12px，写法如下：

  sidebarPanel(
      # s1单独调整字号
      div(style = "font-size: 80%;",
          selectizeInput(
              "s1",
              "Select s1",
              choices = c('A', 'B'),
              multiple = FALSE
          )
      ),
      # r1单独调整字号
      div(style = "font-size: 12px;",
          radioButtons(
              "r1",
              "Select r1",
              choices = c("A", "B", "C")
          )
      ),
      # 其余控件保持默认配置
      radioButtons(
          "r2",
          "Select r2",
          choices = c("P", "R")
      ),
      selectizeInput(
          "s3",
          "Select s3",
          choices = c('C', 'D'),
          multiple = FALSE
      ),
      selectizeInput(
          "s4",
          "Select s4",
          choices = c('A', 'B'),
          multiple = TRUE
      ),
      actionButton(
          "b1",
          "Enter"
      )
  )
  

• 通过CSS按控件id精准匹配样式
  不想额外套div标签的话，可以直接在样式标签里通过控件id绑定样式规则，示例：

  tags$style(HTML("
    /* s1的标签和输入框字号缩小20% */
    #s1-label, #s1 { font-size: 80%; }
    /* r1的标签和选项字号设为12px */
    #r1-label, #r1 { font-size: 12px; }
    /* s4的下拉选项单独缩小字号 */
    #s4 + .selectize-control .selectize-dropdown { font-size: 80%; }
  "))
  

两种写法效果完全一致，按需选择即可。

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