Error when attempting to change a placeholder's color

user_5539569 0
Viewed 1629

When I try to change the placeholder's color:

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

    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color: #909;
        opacity: 1;
    }

    ::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: #909;
        opacity: 1;
    }

    :-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: #909;
    }

    ::-ms-input-placeholder { /* Microsoft Edge */
        color: #909;
    }

    ::placeholder { /* Most modern browsers support this now. */
        color: #909;
    }

I get the error:

validation (css 4.0): "::placeholder" is not a valid pseudo-element

and

validation (css 4.0): "::-ms-input-placeholder" is not a valid pseudo-element

When I run this code the placeholder of the input remains the same grey color and I'm not really sure where to go from here. I'm using the ASP .NET MVC framework.

pseudo-class pseudo-element css html
3 Answers

This code works with my project.

<style>
    .FilterInputs::placeholder {
        color: #d2ddec;
        opacity: .8;
    }
</style>
user_147426260

I am sorry this is a late response and I hope someone coming after this gets to use this, You can simply put the prefix "input" before ::-moz-placeholder and ::-webkit depending on the intended browser

For example :

input::-moz-placeholder { /*  Firefox */
  color: dimgrey;
  opacity: 1; 
}

input::-webkit-input-placeholder { /* Chrome */
  color: dimgrey;
  opacity: 1;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: dimgrey;
}

:-ms-input-placeholder { /* Microsoft Edge */
  color: dimgrey;
}
user_110441910

I'm 99% sure that using ::placeholder without any vendor prefixes is safe. No surprises, when testing on all 3 window and 2 Android browsers -- it works.

Try the following:

  • ☑️ Review my demo ... is the text red?

  • ☑️ Go to your real code and remove all of the extra selectors until there's only one remaining. Ensure that selector has no vendor is prefixes ... the text red?

  • ☑️ Try placing the ::placeholder as the last rule within the </style> tag.

  • ☑️ Increase specificity by doubling. selector input::placeholder::placeholder 

    input {
  display: block;
  width: 80%;
  outline: #930;
  border: inset;
  padding: 3px 5px;
  margin: 10px auto;
}

input::placeholder {
  color: red;
}

input:focus {
  outline: 0;
}
    <input type="text" placeholder="HUGE RED TEXT AS A PLACEHOLDER">

user_28132240
Related