更改 textInput 闪亮小部件的占位符颜色 [英] Change placeholder color of textInput shiny widget

问题描述

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

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

<预><代码>图书馆(闪亮)ui <-流体页面(tags$style(HTML("::placeholder {/* Chrome, Firefox, Opera, Safari 10.1+ */红色;不透明度:1；/* 火狐 */}:-ms-input-placeholder {/* Internet Explorer 10-11 */红色;}::-ms-input-placeholder {/* Microsoft Edge */红色;}")),br(),selectizeInput(inputId = "one",标签 = NULL，选择 = c("字母" = "", "A", "B", "C"),选择 = ""),br(),textInput(inputId = "二",标签 = NULL，占位符 = "数字",值 = ""))服务器 <- 功能(输入，输出，会话){}闪亮应用程序(用户界面，服务器)

如您所见，textInput 小部件的占位符保持灰色，而我也希望它是红色的.

预先感谢您的帮助！

解决方案

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

var q = document.createElement("style");q.innerHTML = `::placeholder { 颜色:红色 }`;document.body.appendChild(q)

在选择演示页面上确实将占位符文本着色为红色.

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

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

(注意后缀)

with some CSS code found in different old posts on Stackoverflow I managed to change the placeholder colour of every selectizeInput and selectInput widget of my shinyapp, but it seems that this code doesn't work for the textInput widgets.

Below you can find a basic reproducible example:

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)

As you can see, the placeholder of the textInput widget remains gray, while I would like it to be red as well.

Thank you in advance for your help!

解决方案

It seems plausible that your problem lies purely in adding your CSS, since doing

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

on the selectize demo page does indeed color the placeholder text red.

As for the second question, for targeting a specific element you want your selector to be like

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

(note the suffix)

这篇关于更改 textInput 闪亮小部件的占位符颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！