如何在Shiny应用中实现可调整大小的selectInput组件？

下面是两种实用的实现方案，能复现你在Radiant应用中看到的可调整大小选择框效果：

方案一：基于原生select的自定义实现 #

利用HTML原生<select>的属性结合CSS，是最直接的方式：

代码示例 #

library(shiny)

ui <- fluidPage(
  # 自定义CSS样式
  tags$style(HTML("
    .resizable-select {
      resize: both; /* 允许同时调整宽高，也可设为vertical/horizontal单独控制 */
      overflow: auto; /* 选项过多时显示滚动条 */
      min-height: 60px; /* 设置最小高度避免缩得太小 */
      min-width: 200px; /* 设置最小宽度 */
    }
  ")),
  
  # 改造后的selectInput
  selectInput(
    inputId = "resize_select",
    label = "可调整大小的选择框",
    choices = paste0("选项", 1:10),
    multiple = TRUE,
    selectize = FALSE, # 必须关闭selectize，否则会替换原生select元素导致resize失效
    class = "resizable-select",
    size = 3 # 初始显示3行选项
  )
)

server <- function(input, output, session) {
  # 这里可以添加你的业务逻辑
}

shinyApp(ui, server)

关键说明 #

• 关闭selectize = FALSE是核心，因为selectize会生成自定义UI组件，覆盖原生select的resize特性
• CSS的resize属性控制可调整的方向，搭配overflow: auto保证内容超出时正常滚动

方案二：基于shinyWidgets的增强实现 #

如果你想保留selectize的美观样式，同时让下拉框支持调整大小，可以用shinyWidgets的pickerInput：

代码示例 #

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  tags$style(HTML("
    .resizable-picker .dropdown-menu {
      resize: both;
      overflow: auto;
      max-height: 300px; /* 限制下拉框最大高度 */
      min-height: 120px;
    }
  ")),
  
  pickerInput(
    inputId = "resize_picker",
    label = "可调整大小的增强选择器",
    choices = paste0("选项", 1:15),
    multiple = TRUE,
    options = pickerOptions(size = 4), # 初始显示4行选项
    class = "resizable-picker"
  )
)

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

shinyApp(ui, server)

关键说明 #

• 此方案是针对下拉菜单区域设置resize，适合需要保留搜索、多选样式的场景
• 通过pickerOptions可以灵活配置初始显示的选项数量

运行上述代码后，你就能拖拽选择框的边缘/右下角调整大小，和目标效果一致。

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