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>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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With