Styling the placeholder in a TextField

Question

The TextField API doesn't mention anything about how one could style the pseudo placeholder element of the input element.

Basically, I would like to change the default styling of the placeholder text, and the normal bag of tricks doesn't work, as I cannot access the element.

Is there a way I can get to it? And if so, what is the JSS/React/DOM equivalent way of writing ::-webkit-input-placeholder?

Why can you not access the element? Even if the element is generated dynamically, your CSS styles that target it will still apply. — Obsidian Age, Dec 14 '17 at 01:04
@CasperSL That's just being lazy. That link was already part of my question. — oligofren, Dec 14 '17 at 01:28
@ObsidianAge That means I would have to write my CSS outside of the JS, wouldn't it? And further, it would also probably be tightly linked to the inner internals of the component, right? — oligofren, Dec 14 '17 at 01:33

Rafa Viotti · Answer 1 · 2020-06-12T13:42:31.877

Case 1

Put the desired placeholder text in the label property of the TextField component, and use the labelClassName property of the TextField to customize it. You could also pass InputLabelProps with a className, classes or style attribute.

Case 2

Refrain from using the label property of TextField and put the placeholder text on its placeholder property instead. Leverage InputProps to override the generated HTML input element's class.

Code

The code below covers both aforementioned cases. CodeSandbox snippet.

import React from 'react';
import TextField from 'material-ui/TextField';
import { withStyles } from 'material-ui/styles';
import withRoot from '../components/withRoot';

const styles = {
  'input-label': {
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    width: '100%',
    color: 'red'
  },

  'input': {
    '&::placeholder': {
      textOverflow: 'ellipsis !important',
      color: 'blue'
    }
  }
};

class Index extends React.Component {
  render() {
    return <div style={ {width: 150, margin: '0 auto'} }>
      {/* Uses "label" and "labelClassName". */}
      <TextField
        fullWidth
        label='I am a really really long red TextField label'
        labelClassName={ this.props.classes['input-label'] } />

      {/* Uses "label" and "InputLabelProps" with inline styles. */}
      <TextField
        fullWidth
        label='I am a really really long green TextField label'
        InputLabelProps={{
          style: {
            textOverflow: 'ellipsis',
            whiteSpace: 'nowrap',
            overflow: 'hidden',
            width: '100%',
            color: 'green'
          } }} />

      {/* Uses "placeholder" and "InputProps" with "classes". */}
      <TextField
        fullWidth
        margin='normal'
        placeholder='I am a really really long glue TextField label'
        InputProps={{ classes: {input: this.props.classes['input']} }} />
    </div>;
  }
}

export default withStyles(styles)(Index);

EDIT

The previous solutions are good if you'd like to personalize a specific component instance. To change the placeholder globally, see ninjaPixel's answer.

score 21 · Answer 2 · answered Sep 18 '19 at 15:11

21

You can style the input at the top-level of your app, which will save you from having to create a custom input component with your styles applied to it (as suggested in other answers).

import { ThemeProvider } from "@material-ui/styles";
import { createMuiTheme } from "@material-ui/core/styles";

const customTheme = createMuiTheme({
overrides: {
  MuiInput: {
    input: {
      "&::placeholder": {
        color: "gray"
      },
      color: "white", // if you also want to change the color of the input, this is the prop you'd use
    }
  }
});

// Render it like this
<ThemeProvider theme={customTheme}>
  <App />
</ThemeProvider>

answered Sep 18 '19 at 15:11

ninjaPixel

6,122
3
36
47

1

It didn't work for me. Instead styling MuiInput you would add: `MuiFormLabel: { root: { color: 'grey' }},` – user2811588 Aug 04 '20 at 09:39
3

Also I'd like to point out something this answer fails to mention and would spare me some time if I knew about it before: you have to pay attention to the variant of your TextField. E.g. if it `variant='filled'` you have to use `MuiFilledInput` instead of `MuiInput`. Apart from that this answer is great and exactly what I was looking for – Iorweth333 Jan 11 '21 at 15:38

score 18 · Answer 3 · edited Aug 21 '19 at 11:06

18

You can use the following code to apply the placeholder style.

const styles = (theme: any) => createStyles({
input: {
    '&::placeholder': {
      fontStyle: 'italic',
    },
  },
});

<TextField
  margin="normal"
  variant="outlined"
  placeholder="Filter..."
  InputProps={{
    classes: { input: classes.input}
  }}
/>

edited Aug 21 '19 at 11:06

Itamar Mushkin

2,803
2
16
32

answered Aug 21 '19 at 10:18

Srihari

181
1
4

score 13 · Answer 4 · answered Oct 27 '20 at 15:21

13

Use InputLabelProps on TextField

<TextField
   InputLabelProps={{
      style: { color: '#fff', some other Styles }, 
   }}
/>

answered Oct 27 '20 at 15:21

Dante Nuñez

439
4
7

I tried the other solutions to change the placeholder color and they didn't work, this works for me – Dante Nuñez Oct 29 '20 at 20:48
1

After trying so many solutions, this alone worked for me. Thanks! – Vani Feb 18 '21 at 12:04

score 4 · Answer 5 · answered Dec 14 '17 at 01:30

I haven't found a proper answer to how I can access the inner input element, but as to how one could target the placeholder element using JSS, I found the answer in the source of the Input element, of which TextField is composed.

Basically, it's using the straight css names, just enclosed in quotes: '&::-webkit-input-placeholder': { color: 'blue' }

score 4 · Answer 6 · answered Dec 14 '17 at 07:37

4

you can add styling to your input using ::placeholder selector in css it'll work

::-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;
}

answered Dec 14 '17 at 07:37

satyajit rout

1,623
10
20

1

I wasn't asking generally. The question is tagged material-ui, so it's specifically using JavaScript and JSS. I added a JSS tag now to further emphasize it, but it should be pretty clear from my last paragraph. – oligofren Dec 14 '17 at 07:39
above css selector is global property for placeholder color change u can use it for material-ui also – satyajit rout Dec 14 '17 at 07:42
1

I don't want to change it globally, that's sloppy. otherwise I wouldn't be asking this specific question. I already knew the proper CSS props, as is apparent from the question. It's targetting the specific pseudo element contained inside a TextField that is hard. – oligofren Dec 14 '17 at 07:44

score 4 · Answer 7 · answered Jan 18 '21 at 20:42

4

To style only the placeholder without the label on top when focused - do the following:

const useStyles = makeStyles(theme => ({
    label: {
         color: 'rgba(0, 0, 0, 0.26)'
    }
}));

const LoginForm = () => {
    const classes = useStyles();

    return (
         <TextField
              ...
              InputLabelProps={{
                   classes: {
                       root: classes.label,
                   }
              }}
         />
    )
}

answered Jan 18 '21 at 20:42

chenop

4,743
4
41
65

What is this an answer to? – oligofren Jan 19 '21 at 18:49
1

This is my way to style a placeholder in a TextField – chenop Jan 19 '21 at 20:55

T S · Answer 8 · 2022-02-26T15:38:17.893

2

Whether you are using the outlined, filled, or standard variants, the placeholder you might be referring to is actually the label and not the ::placeholder. You can use sx in newest MUI versions.

<TextField
    label="Username"
    variant="standard"
    sx={{ input: { color: "yellow" }, "label": {color: "blue"} }} 
/>

edited Feb 26 '22 at 15:38

answered Feb 26 '22 at 15:28

T S

245
2
10

score 2 · Answer 9 · answered Mar 13 '23 at 09:43

2

<TextField
        placeholder='Search...'
        inputProps={{
            style: {color: 'white'}
        }}
/>

answered Mar 13 '23 at 09:43

Batja

51
4

fifaltra · Answer 10 · 2023-04-07T12:37:50.830

Nothing worked for me except this solution (with MUI 5 and sx-props instead of makestyles etc) :

import React, { FC } from 'react';
import { TextField } from '@mui/material';

const searchStyle = {
  // some other styles
};


const searchField: FC < Props > = () => {
 return ( 
 < TextField 
    sx = {
      searchStyle
    }
    placeholder = {
      "Search"
    }
    inputProps = {
      {
        sx: {
          '&::placeholder': {
            color: 'red',
            opacity: 1, // otherwise firefox shows a lighter color
          },
        },
      }
    }
  />
  );
};

(From https://stackoverflow.com/a/70626286/3134778)

score -4 · Answer 11 · answered Jun 01 '20 at 16:28

-4

With styled components I just use:

const StyledTextField = styled(TextField)`
    label {
        font-style: italic;
    }
`;

answered Jun 01 '20 at 16:28

Eric Newsom

1
2

1

Hi, Eric. That answer is not related to the question. I suggest deleting it to avoid downvotes. – oligofren Jun 02 '20 at 22:40

Styling the placeholder in a TextField

11 Answers11

Linked