React change placeholder text color using React inline styling

Question

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',
      ...
}

Possible Duplicate Change an HTML5 input's placeholder color with CSS. — Mayank Shukla
– Mayank Shukla, Commented Oct 29, 2017 at 16:29
Possible duplicate of Set text input placeholder color in reactjs — linasmnew
– linasmnew, Commented Oct 29, 2017 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
– foobar, Commented Oct 29, 2017 at 17:07
@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
– David Saginashvili, Commented Oct 29, 2017 at 17:34
@Swordys, thank you for the answer, and apologies for the question — foobar
– foobar, Commented Oct 29, 2017 at 19:02

Nuno Mestre · Accepted Answer · 2022-07-27 20:33:30Z

1

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

 input::placeholder {
     color: white;
 }

answered Jul 27, 2022 at 20:33

Nuno Mestre

111 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

dubucha · Accepted Answer · 2019-09-21 03:15:06Z

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',
                }
            }}
        />

Collectives™ on Stack Overflow

React change placeholder text color using React inline styling

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related