placeholder color won't change

Question

My placeholder color is not applying, I know how to change placeholder color of input but in this code it's not letting me change color

can anyone help?

form {
  background-color: #4CAF50;
  padding: 30px;
  color: #fff;
}

 ::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #4CAF50;
}

 :-moz-placeholder {
  /* Firefox 18- */
  color: #4CAF50;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<form>
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" placeholder="Email address" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" placeholder="Password" id="pwd">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Answer 1

You need to override bootstrap css, make your css inheritance stronger than bootstrap's css

form {
  background-color: #4CAF50;
  padding: 30px;
  color: #fff;
}

form .form-control::-webkit-input-placeholder { 
  color: #4CAF50;
}

form .form-control::-moz-placeholder {
  color: #4CAF50;
}
form .form-control:-ms-input-placeholder {
  color: #4CAF50;
}
form .form-control:placeholder {
  color: #4CAF50;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<form>
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" placeholder="Email address" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" placeholder="Password" id="pwd">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>