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

Question

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!

Answer 1

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)