占位符顏色不會改變

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>