How to change background color for textAreaInput in r shiny?

Question

I used textAreaInput() in dashboardHeader to allow multiple lines in the header. But the background color of this text area is white and can't blend into the title panel there. I want to change the background color of this text area to either transparent or the same color as used in the dashboardHeader. I've tried something like below. But it does not work. Any suggestions? Thank you!

library(shiny)
library(shinydashboard)

shinyApp(server = function(input, output) {}, ui = 

dashboardPage(skin = "blue",

dashboardHeader(
    title = textAreaInput(inputId = 'header',label = NULL, 
                          width = 250, height = 100,
                          value = "This is a very very very very very loooooong title"
                      ),
    titleWidth = 260
),

dashboardSidebar(
    width = 260,     
    sidebarMenu(
       menuItem("About", tabName = "about", icon = icon("circle")),
       menuItem("References", tabName = "ref", icon = icon("book"))
     )
),

dashboardBody(

    tags$head(tags$style(HTML('
           .textArea {
              background-color: #0000ff;
              border: none;
            }
     '))),

    tabItems(
        tabItem(tabName = 'about'),
        tabItem(tabName = 'ref')
    )
)
))

Bertil Baron Bertil Baron · Accepted Answer · 2017-11-24T20:38:21

Hi you have two choises

first one if you want to change the backgrondcolor for every textArea. I need to remove the dot before textArea because it is a tag not a class the dots before tells the identifier to look for a class. then you need to add !important after the color like this.

tags$head(tags$style(HTML('
   textArea {
     background-color: #0000ff !important;
     border: none;
   }')))

the second is if you only want to change the background color for this specific textArea is better to use the id #header and in this case you don't need the !important

tags$head(tags$style(HTML('
  #header{
    background-color: #0000ff !important;
    border: none;
    }')))

Hope this helps!

How to change background color for textAreaInput in r shiny?

1 Answers