html - 占位符颜色不会改变

Question

我的占位符颜色不适用，我知道如何更改输入的占位符颜色但在这段代码中它不允许我更改颜色

有人可以帮忙吗？

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

你需要覆盖bootstrap css，让你的css继承比bootstrap的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>