Background color of tabs in shiny tabPanel

Question

I would like to customize a shiny application using tabsetPanels so that the selected panel appears in a black background with white text, and the unselected ta

Answer 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:

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

  

    
Colored Tabs
    
    

      

        

          t0
        
        

          t1
        
        

          t2
        
        

          t3
        
        

          t4
        
        

          t5
        
      
      

        

          
normal tab
        
        

          
red tab
        
        

          
blue tab
        
        

          
green tab
        
        

          
normal tab
        
        

          
normal tab