How to change the display attributes of SPECIFIC tabs when using tabPanel in navbarPage

In this example,

library(shiny)
ui <- fluidPage(
  tags$style(type = 'text/css', HTML('.navbar {background-color: red;}')),
  navbarPage("",
    tabPanel("Tab 1", icon = icon("user")),
    tabPanel("Tab 2", icon = icon("cog")),
    tabPanel("Tab 3", icon = icon("sliders"))
  )
)
server <- function(input, output, session) {
}
shinyApp(ui, server)

I would like Tab 3 to be special such that it appears different from the rest for:

background-color + font-color when not hovered and not selected
background-color + font-color when hovered
background-color + font-color when selected
Bolded font

For the other tabs, I am fine with sticking to the defaults.

None of the threads I came across directly address this issue for me, who has no HTML or CSS background. Some addressed part of the problem for tabsetPanel, but not for navbarPage.

Any advice, or redirection to a tutorial for dummies would be nice enough.

Thanks!

Solution

library(shiny)
#select more than one Tab you can try
#1. a[data-value='Tab 2'], a[data-value='Tab 3'] {...}
#2. rename Tab 2 and Tab 3 values to Tab 02 and Tab 03 then use a[data-value*='0'] {...}
ui <- fluidPage(
       tags$style(type = 'text/css', 
                  HTML(".container-fluid > .nav > li > 
                        a[data-value='Tab 3'] {background-color: red; color:white}")),
    navbarPage("",
         tabPanel("Tab 1" ,value = "Tab 1" ,icon = icon("user")),
         tabPanel("Tab 2" ,value = "Tab 2" ,icon = icon("cog")),
         tabPanel("Tab 3" ,value = "Tab 3" ,icon = icon("sliders"))
   )
)
server <- function(input, output, session) {}
shinyApp(ui, server)