如何将shinyWidgets中pickerInput的右侧下拉箭头移至左侧？

要把pickerInput的下拉箭头从右侧移到左侧，需要通过自定义CSS修改其底层bootstrap-select组件的样式，具体实现如下：

直接在UI中添加自定义CSS规则，调整箭头的定位属性，并给选择框内容区域增加左侧内边距避免文字遮挡，完整代码示例：

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  # 自定义CSS调整箭头位置
  tags$style(HTML("
    /* 将下拉箭头移至左侧 */
    .bootstrap-select .dropdown-toggle::after {
      position: absolute;
      left: 15px;
      right: auto;
      margin-top: -2px;
    }
    /* 给选择框内容区加左侧内边距，避免文字和箭头重叠 */
    .bootstrap-select .dropdown-toggle .filter-option {
      padding-left: 40px;
    }
  ")),
  
  pickerInput(
    inputId = "name",
    label = "Choose option",
    choices = c("A", "B", "C"),
    options = list(
      title = "choose"
    )
  )
)

server <- function(input, output) {}

shinyApp(ui = ui, server = server)

关键样式说明 #

• .bootstrap-select .dropdown-toggle::after：这是控制下拉箭头的伪元素，默认定位在右侧，通过设置left: 15px和right: auto将箭头转移到左侧，margin-top用来让箭头垂直居中
• .bootstrap-select .dropdown-toggle .filter-option：给显示选中内容的区域添加左侧内边距，确保选项文字不会被左侧箭头遮挡

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