::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #909; }

This code change color of all input placeholder. How to make different placeholder colors for different input fields

CodePudding user response：

you need to be more specified:
if you put ::-webkit-input-placeholder in the CSS, you will select all placeholders... but this is not what we want

so using :nth-of-type(); a pseudo-class, you can select the wanted one, easily.

useful documentations:

• nth-of-type MDN documentation

so the code will be like this:

/* 1 */

input:nth-of-type(1)::-webkit-input-placeholder {
  color: green;
}


/* 2 */

input:nth-of-type(2)::-webkit-input-placeholder {
  color: blue;
}


/* 3 */

input:nth-of-type(3)::-webkit-input-placeholder {
  color: red;
}

<!-- 1 -->
<input type="text" name="" id="" placeholder="hello world">
<!-- 2 -->
<input type="text" name="" id="" placeholder="hello world">
<!-- 3 -->
<input type="text" name="" id="" placeholder="hello world">

CodePudding user response：

Another option is to use ::placeholder to style the placeholder.

The ::placeholder CSS pseudo-element represents the placeholder text in an or element.

Notice that Internet Explorer doesn't support this, but since you are using webkit, you are using Chrome or Safari, this will work for you.

Example:

::placeholder{
color:red;
opacity:0.6

}

<input placeholder='yes'/>