用于shinydashboard的Tab Box CSS

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

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

我试过像.nav-tabs .active这样的东西,但我无法得到任何工作.

此外,如果有人知道如何更改您选择的选项卡旁边显示的小色条,那也是值得赞赏的.

解决方法

开发工具和“检查元素”非常方便,可以确定要更改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;
}

这是一个例子(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) {
        }
)