Background color of tabs in shiny tabPanel

Solution 1:

The above example is broken apparently (from version 0.14.0), probably due to a Shiny css change. Additionally the title of the post promises more than the actual question and solution actually covered. So I wrote a new more comprehensive example.

  • It sets the default tab background to be aqua and black text.
  • It sets the color of several tabs to be explicit colors (when they are not active) with white text.
  • It sets the active tab background to be black with white text.

Whether or not all these colors are a good idea from a UI point of view is another question...

Here is the code:

library(shiny)
ui <-shinyUI(fluidPage(
  h1("Colored Tabs"),
  tags$style(HTML("
    .tabbable > .nav > li > a                  {background-color: aqua;  color:black}
    .tabbable > .nav > li > a[data-value='t1'] {background-color: red;   color:white}
    .tabbable > .nav > li > a[data-value='t2'] {background-color: blue;  color:white}
    .tabbable > .nav > li > a[data-value='t3'] {background-color: green; color:white}
    .tabbable > .nav > li[class=active]    > a {background-color: black; color:white}
  ")),
  tabsetPanel(
    tabPanel("t0",h2("normal tab")),
    tabPanel("t1",h2("red tab")),
    tabPanel("t2",h2("blue tab")), 
    tabPanel("t3",h2("green tab")),
    tabPanel("t4",h2("normal tab")),
    tabPanel("t5",h2("normal tab"))
  )
))
server <- function(input, output) {}
shinyApp(ui=ui,server=server)

Here is a screen shot:

enter image description here

And in case this breaks again, and the code has to be adjusted, here is the current css/html that is producing this:

<body>
  <div class="container-fluid">
    <h1>Colored Tabs</h1>
    <style>
    .tabbable > .nav > li > a                  {background-color: aqua;  color:black}
    .tabbable > .nav > li > a[data-value='t1'] {background-color: red;   color:white}
    .tabbable > .nav > li > a[data-value='t2'] {background-color: blue;  color:white}
    .tabbable > .nav > li > a[data-value='t3'] {background-color: green; color:white}
    .tabbable > .nav > li[class=active]    > a {background-color: black; color:white}
  </style>
    <div class="tabbable">
      <ul class="nav nav-tabs">
        <li class="active">
          <a href="#tab-5851-1" data-toggle="tab" data-value="t0">t0</a>
        </li>
        <li>
          <a href="#tab-5851-2" data-toggle="tab" data-value="t1">t1</a>
        </li>
        <li>
          <a href="#tab-5851-3" data-toggle="tab" data-value="t2">t2</a>
        </li>
        <li>
          <a href="#tab-5851-4" data-toggle="tab" data-value="t3">t3</a>
        </li>
        <li>
          <a href="#tab-5851-5" data-toggle="tab" data-value="t4">t4</a>
        </li>
        <li>
          <a href="#tab-5851-6" data-toggle="tab" data-value="t5">t5</a>
        </li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane active" data-value="t0" id="tab-5851-1">
          <h2>normal tab</h2>
        </div>
        <div class="tab-pane" data-value="t1" id="tab-5851-2">
          <h2>red tab</h2>
        </div>
        <div class="tab-pane" data-value="t2" id="tab-5851-3">
          <h2>blue tab</h2>
        </div>
        <div class="tab-pane" data-value="t3" id="tab-5851-4">
          <h2>green tab</h2>
        </div>
        <div class="tab-pane" data-value="t4" id="tab-5851-5">
          <h2>normal tab</h2>
        </div>
        <div class="tab-pane" data-value="t5" id="tab-5851-6">
          <h2>normal tab</h2>
        </div>
      </div>
    </div>
  </div>
</body>

Solution 2:

EDIT: for shiny versions >= 0.14 see here.

If you select the link with an 'active' class as an immediate descendant of the nav I think you can get what you're after. The UI would look like

ui <- shinyUI(
    fluidPage(
        tags$style(HTML("
        .tabs-above > .nav > li[class=active] > a {
           background-color: #000;
           color: #FFF;
        }")),
        tabsetPanel(
            tabPanel(
                title = "Hello",
                textInput(inputId = "text", label = "Input")
            ),
            tabPanel(
                title = "World"
            )
        )
    )
)

enter image description here