2

I am trying to figure out how to change the color of placeholder text for a search box to white, here is my css:

enter image description here

Heres the html:

enter image description here

Catarina Ferreira
  • 1,824
  • 5
  • 17
  • 26
Kevin
  • 31
  • 2
  • 5

1 Answers1

5

You can use the ::placeholder pseudo class.

input {
  background-color: #907;
}

input::placeholder {
  color: #fff;
}
<input type="text" placeholder="Enter Description Here" />

However, it is not standardized, and may not work well across all browsers.

Add vendor prefixes for better support:

input {
  background-color: #907;
}

input::placeholder {
  color: #fff;
}

::-webkit-input-placeholder {  /* Chrome/Opera/Safari */
  color: #fff;
}
::-moz-placeholder {  /* Firefox 19+ */
  color: #fff;
}
:-moz-placeholder { /* Firefox 18- */
  color: #fff;
}
:-ms-input-placeholder {  /* Edge/IE 10+ */
  color: #fff;
}
<input type="text" placeholder="Desciption" />

Important: Do not group these selectors, as explained in this post.

Chava Geldzahler
  • 3,605
  • 1
  • 18
  • 32