如何在bslib Bootstrap 5环境下调整DT的筛选图标

DT组件的筛选框样式基于Bootstrap 3设计，在Bootstrap 5环境下会出现图标错位、原生清除图标仅聚焦显示的问题，以下是两种符合要求的解决方案：

方案一：将错位的圆形清除图标移回原位置 #

通过CSS调整图标的定位属性，修正Bootstrap 5盒模型带来的偏移：

# Load required libraries
library(shiny)
library(bslib)
library(DT)

ui <- fluidPage(
  theme = bs_theme(
    version = 5,
    bootswatch = "cosmo",
  ),
  # 添加自定义CSS修复图标位置
  tags$style(HTML("
    /* 调整筛选框内边距，给图标留出空间 */
    div.dataTables_wrapper div.dataTables_filter input {
      padding-right: 2.25rem !important;
      position: relative;
    }
    /* 把DT自带的圆形清除图标定位到筛选框右侧居中位置 */
    div.dataTables_wrapper div.dataTables_filter .clear-icon {
      position: absolute !important;
      right: 0.75rem;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1;
    }
  ")),

  titlePanel("Shiny App with bslib/bootstrap5 and DT"),
  mainPanel(
    DTOutput("data_table")
  )
)


server <- function(input, output) {

  data <- data.frame(
    Name = c("John", "Paul", "George", "Ringo"),
    Instrument = c("Guitar", "Bass", "Guitar", "Drums"),
    stringsAsFactors = FALSE
  )

  # Render DataTable
  output$data_table <- renderDT({
    datatable(
      data,
      filter = "top",
      options = list(
        pageLength = 5,
        autoWidth = TRUE,
        dom = "Bfrtip"
      )
    )
  })
}

shinyApp(ui = ui, server = server)

方案二：永久显示自定义清除图标并替换DT原生图标 #

强制显示Bootstrap 5原生的清除按钮，同时替换为自定义图标（示例用内联SVG，无需外部依赖），并隐藏DT自带的错位图标：

# Load required libraries
library(shiny)
library(bslib)
library(DT)

ui <- fluidPage(
  theme = bs_theme(
    version = 5,
    bootswatch = "cosmo",
  ),
  # 添加自定义CSS实现永久显示自定义清除图标
  tags$style(HTML("
    /* 永久显示Bootstrap 5原生清除按钮，替换为自定义SVG图标 */
    div.dataTables_wrapper div.dataTables_filter input::-webkit-search-cancel-button {
      -webkit-appearance: none;
      height: 1.2em;
      width: 1.2em;
      border-radius: 50%;
      background: url('data:image/svg+xml,%3Csvg xmlns=http://www.w3.org/2000/svg viewBox=0 0 24 24 fill=%236c757d%3E%3Cpath d=M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z/%3E%3C/svg%3E') no-repeat center;
      background-size: contain;
      opacity: 1 !important;
      cursor: pointer;
      margin-right: 0.5rem;
    }
    /* 隐藏DT自带的圆形清除图标 */
    div.dataTables_wrapper div.dataTables_filter .clear-icon {
      display: none;
    }
    /* 调整筛选框内边距适配新图标 */
    div.dataTables_wrapper div.dataTables_filter input {
      padding-right: 2rem !important;
    }
  ")),

  titlePanel("Shiny App with bslib/bootstrap5 and DT"),
  mainPanel(
    DTOutput("data_table")
  )
)


server <- function(input, output) {

  data <- data.frame(
    Name = c("John", "Paul", "George", "Ringo"),
    Instrument = c("Guitar", "Bass", "Guitar", "Drums"),
    stringsAsFactors = FALSE
  )

  # Render DataTable
  output$data_table <- renderDT({
    datatable(
      data,
      filter = "top",
      options = list(
        pageLength = 5,
        autoWidth = TRUE,
        dom = "Bfrtip"
      )
    )
  })
}

shinyApp(ui = ui, server = server)

说明 #

• 方案一保留DT原生清除图标，仅修正位置，完全适配Bootstrap 5的样式体系
• 方案二使用浏览器原生的搜索框清除按钮，通过CSS强制永久显示，且可通过替换SVG代码自定义图标样式（无需引入外部图标库）

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