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

Background color of tabs in shiny tabPanel

Solution 1:

Solution 2:

Related

Recent Posts