占位符颜色不会改变

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>

Answer 2

您需要定义元素以及

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

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

Answer 3

您可以向CSS添加重要内容，因为有时它会被用户代理样式覆盖

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

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

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

<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 4

我想这是因为Bootstrap！写

color: #4CAF50 !important;

作品。

请注意，您应该定义:-moz-placeholder和::-moz-placeholder（请注意额外的:），以使其适用于每个Firefox版本：

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

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

:-moz-placeholder {
  color: #4CAF50 !important;
}

::-moz-placeholder {
  color: #4CAF50 !important;
}

<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>