Question

我正在尝试将简单的颜色应用于特定的输入框。我知道我们可以这样做：

::-webkit-input-placeholder {
   color: #000000;
}

:-moz-placeholder {
   color: #000000;  
}

:input:-ms-input-placeholder {  
   color: #000000;  
}

为了让它在我的输入框上工作，我尝试了：

.search-top-container form input::-webkit-input-placeholder {
   color: #000000;
}

.search-top-container form input:-moz-placeholder {
   color: #000000;  
}


.search-top-container form input:-ms-input-placeholder {  
   color: #000000;  
}

但它不起作用。我也尝试过使用重要标签，但这并不起作用。非常感谢任何帮助，谢谢！

Answer 1

您并不是说在哪个浏览器中它不起作用，但您确实在使用Mozilla代码时出错。最新的Mozilla浏览器（自v19起）仅使用两个冒号，因此::-moz-placeholder代替:-moz-placeholder。

此外，占位符的默认样式包含opacity:.4，因此如果您希望跨浏览器兼容，则还必须设置不透明度。请参阅MDN。

＆＃13;

.search-top-container form input::-webkit-input-placeholder {
  color: #F00000;
  opacity: 1;
}
.search-top-container form input::-moz-placeholder {
  color: #F00000;
  opacity: 1;
}
.search-top-container form input:-ms-input-placeholder {
  color: #F00000;
  opacity: 1;
}

＆＃13;

<div class="search-top-container">
  <form>
    <input placeholder="Firstname Lastname" />
  </form>
</div>

＆＃13;

（请注意，在此片段中，我使用红色作为颜色，以避免您认为它不起作用的情况，因为它恰好与默认颜色相同。）

占位符颜色不起作用CSS

1 个答案: