更改 textInput 闪亮小部件的占位符颜色答案

【问题标题】：Change placeholder color of textInput shiny widget更改 textInput 闪亮小部件的占位符颜色
【发布时间】：2019-12-31 21:41:06
【问题描述】：

通过在 Stackoverflow 上的不同旧帖子中找到一些 CSS 代码，我设法更改了我的 shinyapp 的每个 selectizeInput 和 selectInput 小部件的占位符颜色，但似乎此代码不适用于 textInput 小部件。

您可以在下面找到一个基本的可重现示例：


library(shiny)

ui <- fluidPage(

  tags$style(HTML("::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
                   color: red;
                   opacity: 1; /* Firefox */}

                  :-ms-input-placeholder { /* Internet Explorer 10-11 */
                  color: red;}

                  ::-ms-input-placeholder { /* Microsoft Edge */
                  color: red;
                  }")),

br(),

  selectizeInput(inputId = "one",
                 label = NULL,
                 choices = c("Letters" = "", "A", "B", "C"),
                 selected = ""),

br(),

  textInput(inputId = "two",
            label = NULL,
            placeholder = "Numbers",
            value = "")

)

server <- function(input, output, session) {

}

shinyApp(ui, server)

如您所见，textInput 小部件的占位符仍然是灰色的，而我也希望它是红色的。

提前感谢您的帮助！

【问题讨论】：

在单独的文件中给出 CSS 样式并使用 includeCSS() 函数引用您的应用程序。
感谢您的评论，我刚刚在我的流体页面开头尝试了这段代码：tags$head(includeCSS(path = "~/style.css"))，但不幸的是结果总是一样的。
标签$style(HTML(""))。你错过了添加HTML方法
再次感谢，我刚刚编辑了上面的脚本，包括 HTML 方法，但这个解决方案对我也不起作用，你在哪里添加的？
内联CSS方法link

标签： css r shiny placeholder shinyapps

【解决方案1】：

您的问题完全在于添加 CSS 似乎是合理的，因为这样做

var q = document.createElement("style");
q.innerHTML = `::placeholder { color: red }`;
document.body.appendChild(q)

在selectize demo page 上确实将占位符文本着色为红色。

至于第二个问题，针对特定元素，您希望选择器像

#e6-selectized::placeholder { color: red }

（注意后缀）

【讨论】：

非常感谢YellowAfterlife！我已将您的代码插入到我的流体页面开头的 HTML 标记 (tags$style(HTML('#my-textInput-id::placeholder {color: red}'))) 中，它运行良好！