4

How can I change placeholder text color with React inline styling? I'm using the following input styling:

input: {
      width: '100%',
      height: '100%',
      backgroundColor: 'white',
      border: '0px',
      float: 'left',
      paddingLeft: '30px',
      ...
}
foobar
  • 3,849
  • 8
  • 22
  • 32
  • Possible Duplicate [**Change an HTML5 input's placeholder color with CSS**](https://stackoverflow.com/questions/2610497/change-an-html5-inputs-placeholder-color-with-css). – Mayank Shukla Oct 29 '17 at 16:29
  • 2
    Possible duplicate of [Set text input placeholder color in reactjs](https://stackoverflow.com/questions/38922878/set-text-input-placeholder-color-in-reactjs) – linasmnew Oct 29 '17 at 16:30
  • None of "possible duplicate" links answer my question. I'm trying to do this in pure React with React inline styling and I don't want to use Radium. – foobar Oct 29 '17 at 17:07
  • 2
    @foobar You can't change pseudo element styles with React inline styles. You either have to use the third party library (likes of Radium) or add `className` to your `input` and style it's pseudo element through CSS file. – David Saginashvili Oct 29 '17 at 17:34
  • @Swordys, thank you for the answer, and apologies for the question – foobar Oct 29 '17 at 19:02

2 Answers2

1

You can simply target the placeholder text inside the attribute like so:

 input::placeholder {
     color: white;
 }
Nuno Mestre
  • 11
  • 1
0

There is a single space that sits between the selector and className, so I had to do this to achieve.

Please refer to this, https://github.com/FormidableLabs/radium/issues/712

        <Style
            scopeSelector=""
            rules={{
                '.textfield-input::placeholder': { /* Chrome, Firefox, Opera, Safari 10.1+ */
                    color: 'red',
                    opacity: 1 /* Firefox */
                },

                '.textfield-input:-ms-input-placeholder': { /* Internet Explorer 10-11 */
                    color: 'red',
                },

                '.textfield-input::-ms-input-placeholder': { /* Microsoft Edge */
                    color: 'red',
                }
            }}
        />
dubucha
  • 1,027
  • 10
  • 16