如何在 r shiny 中更改 textAreaInput 的背景颜色？答案

【问题标题】：How to change background color for textAreaInput in r shiny?如何在 r shiny 中更改 textAreaInput 的背景颜色？
【发布时间】：2017-11-24 17:53:41
【问题描述】：

我在dashboardHeader 中使用了textAreaInput() 以允许标题中有多行。但是这个文本区域的背景颜色是白色的，不能融入那里的标题面板。我想将此文本区域的背景颜色更改为透明或与dashboardHeader 中使用的颜色相同的颜色。我试过类似下面的东西。但它不起作用。有什么建议么？谢谢！

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')
    )
)
))

【问题讨论】：

标签： shiny textarea background-color shinydashboard

【解决方案1】：

你有两个选择

如果您想更改每个 textArea 的背景颜色，则为第一个。我需要删除 textArea 之前的点，因为它是一个标签而不是一个类，之前的点告诉标识符寻找一个类。那么你需要在这样的颜色后面加上!important。

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

第二个是如果您只想更改此特定 textArea 的背景颜色，最好使用 id #header，在这种情况下您不需要 !important

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

希望这会有所帮助！

【讨论】：

感谢您的详细回复！两种方式都很完美！我还在textArea 或#header 中尝试了background: transparent，它也有效。我不需要知道用于默认颜色的确切十六进制代码更容易。但我需要更改文本颜色以使其更好地可见。