HTML Form How to - Style input placeholder

Question

We would like to know how to style input placeholder.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#test-webkit::-webkit-input-placeholder {
  color: red;
}<!--  w  w w .j  a  v a  2 s  .  c om-->

#test-moz:-moz-placeholder {
  color: red;
}

#test-both::-webkit-input-placeholder, #test-both:input:-moz-placeholder
  {
  color: red;
}

.test-both::-webkit-input-placeholder {
  color: red;
}

.test-both:-moz-placeholder {
  color: red;
}
</style>
</head>
<body>
  <input type="text" id="test-webkit" placeholder="test-webkit" />
  <br />
  <input type="text" id="test-moz" placeholder="test-moz" />
  <br />
  <input type="text" id="test-both" placeholder="test-both" />
  <br />
  <input type="text" class="test-both" placeholder="test-both-separately" />
</body>
</html>

The code above is rendered as follows: