更改textInput闪亮小部件

时间:2019-08-27 16:56:52

标签: css r shiny placeholder shinyapps

在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小部件的占位符保持为灰色,而我希望它也为红色。

提前感谢您的帮助!

1 个答案:

答案 0 :(得分:0)

自从这样做以来,您的问题似乎纯粹在于添加CSS似乎是合理的

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

确实确实将占位符文本染成红色。

关于第二个问题,要定位特定元素,您希望选择器像

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

(请注意后缀)