1

I have been trying to set the placeholder color for MUI TextField.

I could see the placeholder turning red with the styles i have added but the red color looks faded.

how do i style the placeholder so that the color looks solid.

                            <TextField
                                placeholder="hello"
                                variant="outlined"
                                sx={{
                                    input: {
                                        color: 'red', // <----- i want it to be original red.
                                    },
                                    label: { color: 'blue' },
                                }}
                            />

enter image description here

hafiz ali
  • 1,378
  • 1
  • 13
  • 33

2 Answers2

11

Some browsers (such as Firefox) set the default opacity of placeholders to something less than 100%.

https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder#opaque_text

So, you should set opacity of placeholder to 1

<TextField
   placeholder="hello"
   variant="outlined"
   sx={{
      input: {
         color: 'red',
         "&::placeholder": {    // <----- Add this.
            opacity: 1,
         },
      },
      label: { color: 'blue' }
   }}
/>
Amr Eraky
  • 1,423
  • 7
  • 13
0

Or CSS if you want clean code:

.input{
    :last-child{
        font-size: 20px !important;
        font-weight: bold !important;
        &::placeholder{
            opacity: 1 !important;
        }
    } 
}
Adrian Mole
  • 49,934
  • 160
  • 51
  • 83
Etana
  • 19
  • 5
  • 1
    from experience, its not always very nice to use important. you can see the other accepted answer without the use of important. – hafiz ali Jan 22 '23 at 11:12
  • https://stackoverflow.com/a/8360330/4758148 good explanation for both worlds in this answer – hafiz ali Jan 22 '23 at 11:14