I am trying to change the font size of the placeholder. So I included font size in the below classes but it's not changing.

Can you tell me how to fix it so that in future I will fix it myself.

Providing my codesnippet and sandbox below

 cssLabel: {
    "&$cssFocused": {
      color: purple[500],
      fontSize: 14
    }
  },
  cssFocused: {},
  cssUnderline: {
    "&:after": {
      borderBottomColor: purple[500],
      fontSize: 14
    }
  },
  cssOutlinedInput: {
    "&$cssFocused $notchedOutline": {
      borderColor: purple[500],
      fontSize: 14
    }
  },
  notchedOutline: {},

I am trying to change the font size of the placeholder. So I included font size in the below classes but it's not changing.

Can you tell me how to fix it so that in future I will fix it myself.

Providing my codesnippet and sandbox below

https://codesandbox.io/s/61183rqp3w

 cssLabel: {
    "&$cssFocused": {
      color: purple[500],
      fontSize: 14
    }
  },
  cssFocused: {},
  cssUnderline: {
    "&:after": {
      borderBottomColor: purple[500],
      fontSize: 14
    }
  },
  cssOutlinedInput: {
    "&$cssFocused $notchedOutline": {
      borderColor: purple[500],
      fontSize: 14
    }
  },
  notchedOutline: {},

• javascript
• html
• css
• reactjs
• material-ui

Share Improve this question Follow edited Dec 23, 2018 at 19:25 Bahman Parsa Manesh 2,36833 gold badges1818 silver badges3636 bronze badges asked Dec 23, 2018 at 13:31 user10803047user10803047 2

• w3schools./howto/howto_css_placeholder.asp – לבני מלכה Commented Dec 23, 2018 at 13:34
• Possible duplicate of Changing font-family for placeholder – Waleed Iqbal Commented Dec 23, 2018 at 14:03

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

In order to achieve your target, you must change the input styles properties in InputProps, as an example:

note: this will show ... if the placeholder overflow.

const styles = theme => ({
  input: {
    "&::placeholder": {
      textOverflow: "ellipsis !important",
      color: "blue",
      fontSize: 14
    }
  }
});

and

the ponent should be:

<TextField
  InputProps={{
   classes: {
     input: classes.input
   }
  }}
  variant="outlined"
  placeholder="Exp. XXXXXXXXXXXX"
/>

please find the code sandbox here: https://codesandbox.io/s/9j479w189y

for change the placeholder style you may use this code :

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}

source: CSS-tricks