style the css of the placeholder

Question

I am trying to style the css of the placeholder.
so I gave color red inside the input class
but still its not changing.
I researched and found this link Styling the placeholder in a TextField
but still no luck
can you tell me how to fix it.
providing my code snippet and sandbox below.

https://codesandbox.io/s/material-demo-iw4gr

input: {
    marginLeft: 8,
    flex: 1,
    "&::placeholder": {
      // fontSize: '14 !important',
      color: "red"
    }
  },

  <InputBase
          className={classes.input}
          placeholder="Search Google Maps"
          inputProps={{ "aria-label": "Search Google Maps" }}
        />

score 1 · Answer 1 · edited Jul 16 '19 at 14:49

Instead of using the className properties, you should use the classes properties instead to overwrite the default stylings for the InputBase component.

I think the reason why className does not work in this scenario, is because className only targets the stylings of the wrapper element, whereas classes will allow you to fully overwrite the specific elements of InputBase, such as the input itself. You may read up more about it on the documentation over here.

<InputBase
  classes={{
    input: classes.input,
  }}
  placeholder="Search Google Maps"
/>

I have replicated a demo for you over here.

XuWang · Accepted Answer · 2019-07-15T06:12:53.973

0

/* try this */
/* Attention: There is a space between & and ::-webkit-input-placeholder */

input: {
    marginLeft: 8,
    flex: 1,
    "& ::-webkit-input-placeholder": {
      color: "red !important"
    }
  }

Besides, set input placeholder like this

::-webkit-input-placeholder { /* WebKit browsers */
  color: "red"
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: "red"
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
 color: "red"
}

edited Jul 15 '19 at 06:12

answered Jul 15 '19 at 03:16

XuWang

179
7

This won't work.. This turns the entire field red, including the text the user types in – wentjun Jul 15 '19 at 03:19
I revised the answer and Please try again. Is it what you want? Attention: There is a space between & and ::-webkit-input-placeholder – XuWang Jul 15 '19 at 06:14

score 0 · Answer 3 · answered Jul 15 '19 at 03:33

0

What I believe you want is the pseudo-selector ::placeholder { color: red; }

CanIUse.com shows this is having fairly widespread acceptance.

This will allow the placeholder to be red but the input to be formatted in whatever color you have specified.

answered Jul 15 '19 at 03:33

WahhabB

520
3
8

style the css of the placeholder

3 Answers3