如何移除R Shiny中子选项卡的阴影效果？

核心问题解决：取消所有子选项卡阴影 #

你的当前CSS仅作用于最外层主选项卡，嵌套的子选项卡需要通过层级选择器覆盖样式。只需修改tags$style中的CSS规则，即可统一取消所有层级选项卡的阴影，并优化激活状态的视觉衔接：

library(shiny)
library(shinyjs)

ui <- shinyUI(fluidPage(
  h1("Tabs"),
  tags$style(HTML("
    /* 所有层级选项卡基础样式：取消阴影、统一背景色 */
    .tabbable .nav > li > a {
      background-color: #E0E0E0;
      color: black;
      box-shadow: none; /* 关键：取消所有阴影 */
      border: 1px solid #ccc;
    }
    /* 激活状态选项卡：白色背景，取消阴影，优化底部边框避免重叠 */
    .tabbable .nav > li.active > a {
      background-color: white;
      color: black;
      box-shadow: none;
      border-bottom: 1px solid white;
    }
  ")),
  tabsetPanel(
    tabPanel("Tab 1", div(style = "margin-top: 5px"),
             tabsetPanel(
               tabPanel("Tab 1 subtab A"), 
               tabPanel("Tab 1 subtab B")
             )
    ),
    tabPanel("Tab 2", div(style = "margin-top: 5px"),
             tabsetPanel(
               tabPanel("Tab 2 subtab A"), 
               tabPanel("Tab 2 subtab B")
             )
    ),
    tabPanel("Tab 3",h2("senior tab 3")), 
    tabPanel("Tab 4",h2("senior tab 4")),
    tabPanel("Tab 5",h2("senior tab 5")),
    tabPanel("Tab 6",div(style = "margin-top: 5px"),
             tabsetPanel(
               tabPanel("Tab 6 subtab A"), 
               tabPanel("Tab 6 subtab B")
             )
    )
  )
))
server <- function(input, output) {}
shinyApp(ui=ui,server=server)

实用美化建议 #

以下是几个提升选项卡体验的CSS优化方向，可按需添加到tags$style中：

• 悬停交互反馈：鼠标悬停时改变背景色，增强交互感

  .tabbable .nav > li > a:hover {
    background-color: #f0f0f0;
  }
  

• 圆角柔和样式：给选项卡顶部添加圆角，弱化硬朗感

  .tabbable .nav > li > a {
    border-radius: 4px 4px 0 0;
  }
  

• 层级区分子选项卡：给子选项卡设置稍浅的背景色，明确层级关系

  .tabbable .tabbable .nav > li > a {
    background-color: #f5f5f5;
  }
  .tabbable .tabbable .nav > li.active > a {
    background-color: white;
  }
  

• 激活状态强化：加粗激活选项卡的文字，突出当前焦点

  .tabbable .nav > li.active > a {
    font-weight: bold;
  }
  

• 舒展文字间距：增大选项卡内边距，让文字布局更宽松

  .tabbable .nav > li > a {
    padding: 8px 15px;
  }
  

内容的提问来源于stack exchange，提问作者Curious Jorge - user9788072