CODEWITHSUNDEEP
javascripthtmlcssreactjsmaterial-ui
user10803047
user10803047

Reputation:

Change the font size of the placeholder

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: {},

Upvotes: 2

Views: 10693

Answers (2)

Nadun
Nadun

Reputation: 7853

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 component should be:

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

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

Upvotes: 3

m7md2112
m7md2112

Reputation: 327

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

Upvotes: 0

Related Questions