shinydashboard 的选项卡框 CSS

Question

我正在尝试更改 shinydashboard 中 tabBox 的选项卡样式。我能够更改未选中选项卡的背景，但无法更改已选中选项卡的背景或每个选项卡中显示的文本。这是我添加到 custom.css 文件以更改未选中的选项卡背景的内容：

.nav-tabs {
  background-color: #006747;
}

我试过 .nav-tabs .active 之类的东西，但我什么都做不了。

此外，如果有人知道如何更改显示在您选择的选项卡旁边的小彩色条子，也将不胜感激。

Answer 1

开发人员工具和 "inspect element" 非常方便地确定您要从哪个类更改 css。

要更改所选选项卡的条子和颜色，您可以这样做：

.nav-tabs-custom .nav-tabs li.active:hover a, .nav-tabs-custom .nav-tabs li.active a {
     background-color: transparent;
     border-color: transparent;
}

.nav-tabs-custom .nav-tabs li.active {
     border-top-color: #FFF;
}

这是一个示例（backbone 来自 here 的代码）：

library(shiny)
library(shinydashboard)
body <- dashboardBody(
        fluidRow(tags$style(".nav-tabs {
  background-color: #006747;
}

.nav-tabs-custom .nav-tabs li.active:hover a, .nav-tabs-custom .nav-tabs li.active a {
background-color: transparent;
border-color: transparent;
}

.nav-tabs-custom .nav-tabs li.active {
    border-top-color: #FFF;
}"),
                tabBox(
                        title = "First tabBox",
                        # The id lets us use input$tabset1 on the server to find the current tab
                        id = "tabset1", height = "250px",
                        tabPanel("Tab1", "First tab content"),
                        tabPanel("Tab2", "Tab content 2")
                )

))

shinyApp(
        ui = dashboardPage(
                dashboardHeader(title = "tabBoxes"),
                dashboardSidebar(),
                body
        ),
        server = function(input, output) {
        }
)

shinydashboard 的选项卡框 CSS

Tab Box CSS for shinydashboard

css

r

shiny

shinydashboard