如何在Shiny中恢复HTML details/summary的箭头样式？

在Shiny中使用tags$details和tags$summary创建折叠区域时，默认箭头样式会被Shiny的全局CSS覆盖消失，手动设置list-style-type: disc无效，可通过以下方法解决：

方法1：直接给summary标签添加样式 #

通过style属性设置list-style: revert，强制恢复浏览器默认的箭头样式：

library(shiny)
ui <- fluidPage(
  tags$details(
    tags$summary("Collapsible", style = "list-style: revert;"),
    "This content is inside"
  )
)
shinyApp(ui = ui, server = function(input, output) {})

方法2：全局自定义CSS（适合多个折叠区域） #

如果页面包含多个折叠区域，添加全局CSS块统一设置样式，确保覆盖Shiny的默认样式：

library(shiny)
ui <- fluidPage(
  tags$style(HTML("
    /* 恢复summary的默认箭头样式 */
    summary {
      list-style: revert !important;
    }
    /* 针对不同浏览器的兼容补充（可选） */
    summary::-webkit-details-marker {
      display: inline;
    }
    summary::-moz-list-bullet {
      display: inline;
    }
  ")),
  tags$details(
    tags$summary("Collapsible"),
    "This content is inside"
  ),
  tags$details(
    tags$summary("Another Collapsible"),
    "More content here"
  )
)
shinyApp(ui = ui, server = function(input, output) {})

原理说明 #

Shiny依赖的CSS框架（如Bootstrap）会重置summary元素的list-style为none，并隐藏浏览器自带的伪元素箭头（如::-webkit-details-marker）。list-style: revert可让元素恢复浏览器原生样式，!important则确保自定义样式优先级高于Shiny的默认样式。

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