如何修改Shiny+bslib下拉菜单默认caret图标为三点样式

修改不生效的核心原因有三点：

1. 未清除Selectize默认下拉箭头的border属性，原有样式覆盖了自定义设置
2. CSS选择器权重不足，优先级低于Selectize内置样式
3. 本地SVG路径assets/icons/dots.svg未随Shiny应用部署，无法正常加载

完整可用代码 #

library(bslib)
library(shiny)

ui <- function(request) { 
  
  bootstrapPage(
    navbarPage(
      id = "dir",
      theme = bs_theme(
        version = 3,
        bootswatch = "yeti"
      ),
      title = "Mobile Testing", 
      windowTitle = "Mobile Testing", 
      collapsible = TRUE,
      
      header =  tags$head(tagList(tags$style(HTML('
.selectize-control.single .selectize-input, .selectize-control.single .selectize-input input {
    cursor: pointer;
    background: darkslategrey;
    color: #fff;
}
/* 更高权重的选择器，覆盖默认样式 */
.selectize-control.single .selectize-input::after{
    /* 清除默认下拉箭头的border样式 */
    border: none !important;
    content: "" !important;
    display: inline-block !important;
    /* 自定义三点图标样式，直接内嵌SVG避免路径问题 */
    background-color: #fff;
    height: 15px;
    width: 15px;
    margin-top: 0 !important;
    transform: none !important;
    /* 内嵌三点SVG的data URI */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E");
}                                                  
                                                  '
      ))
      )),
      
      ## First navbarMenu
      navbarMenu(
        title = "Menu #1", 
        tabPanel(title = "Tab 1", 
                 selectizeInput("variable", "Variable:",
                                c("Cylinders" = "cyl",
                                  "Transmission" = "am",
                                  "Gears" = "gear"),
                                multiple = FALSE,
                                options = list(
                                  readOnly = TRUE, 
                                  onDelete = I("function() { return false }")
                                ))
                 )
    )
  ) )
  
}

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

shiny::shinyApp(ui, server)

核心修改点 #

• 选择器改用.selectize-control.single .selectize-input::after提高权重，确保覆盖内置样式
• 强制清除默认样式的border、content、transform属性，避免原有箭头残留
• 将三点SVG直接转码为Data URI内嵌到CSS中，不需要额外部署本地SVG文件，兼容性更好
• 调整位置属性，保证图标垂直居中对齐

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