J Rock
J Rock

Reputation: 261

How to change the placeholder font color for dcc.Input, using Plotly's Dash

I cannot figure out how to change the placeholder's font color for dcc.Input, Via Plotly's Dash. For this example, I would like to change the placeholder font color to blue.

I have searched through the documentation here, but have not been able to find a solution.

Thanks,

Here is what I have tried...

    dcc.Input(
               placeholder='Name...',
               type='text',
               value='',
               style={'display': 'inline-block',
                      'background-color': 'white',
                      'border-color': 'white',
                      'color': 'red',
                      'place-holder-color':'blue'

                     }
              )

Upvotes: 1

Views: 3734

Answers (1)

J Rock
J Rock

Reputation: 261

I was able to get help on a different forum, but answering my own question here incase someone else ever struggles with this.

To change the placeholder's font color for dcc.Input, via Plotly's Dash, you need to add this line of code to your projects CSS file..

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: blue; #replace blue with whatever color your want your font to be 
  opacity: 1; /* Firefox */
}

Incase, like me, you did not even have a CSS file for your project yet, here is a link to the Dash documentation showing how to add one: Adding Your Own CSS

Upvotes: 4

Related Questions