4

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!

nd091680
  • 585
  • 4
  • 15
  • give the CSS style in a separate file and refer to your application using includeCSS() function. – Deepu Reghunath Aug 27 '19 at 17:09
  • Thanks for your comment, I have just tried through this code at the beginning of my fluidPage: `tags$head(includeCSS(path = "~/style.css"))` but the result unfortunately is always the same. – nd091680 Aug 27 '19 at 17:15
  • tags$style(HTML("")). you miss to add `HTML` method – Deepu Reghunath Aug 27 '19 at 17:42
  • Thanks again, I have just edited my script above including the HTML method too, but also this solution doesn't work for me, where did you add it? – nd091680 Aug 27 '19 at 17:56
  • what about inlineCSS method [link](https://www.rdocumentation.org/packages/shinyjs/versions/1.0/topics/inlineCSS) – Deepu Reghunath Aug 27 '19 at 18:06
  • The problem is that I don't know how to use the inputId of the textInput widget ("two") for a specific CSS call as it can be done for other parameters (I know it doesn't work, but an example would be: "#two {placeholder-colour: red}"). – nd091680 Aug 27 '19 at 18:20

1 Answers1

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)

YellowAfterlife
  • 2,967
  • 1
  • 16
  • 24
  • Thank you very much [YellowAfterlife](https://stackoverflow.com/users/5578773/yellowafterlife)! I have inserted your code in the HTML tag (`tags$style(HTML('#my-textInput-id::placeholder {color: red}'))`) at the beginning of my fluidPage and it works perfectly! – nd091680 Aug 28 '19 at 13:48