Question

我正在使用名为Stylish的chrome插件来更改此网站的CSS。我已成功改变了大部分内容，但有一部分是我无法改变的。

占位符颜色更改 最糟糕的是搜索栏中的占位符文本的颜色（“搜索Quizlet”。）我写了一些css（如下所示），试图改变它。虽然它改变了另一个输入字段中的占位符文本（你赢了除非您已登录，否则无法看到它，它没有改变正确颜色。

  ::-webkit-input-placeholder,
input::-webkit-input-placeholder,
form input::-webkit-input-placeholder,
input:placeholder-shown,
::placeholder,
#header .search .submit{
    color: #999;
}

以上是我尝试找到哪个标签负责更改占位符的文本颜色。

Answer 1

您想要使用/更改的内容如下：

input, .actual-edit-overlay {
    -webkit-text-fill-color: #fff !important;
}

Answer 2

你几乎在那里，但并不完全。您需要所有浏览器的供应商前缀。

input::-webkit-input-placeholder,
input::-moz-placeholder, 
input:-ms-input-placeholder  
{  
    color:#999 !important;  
}

Answer 3

这是CSS-Tricks的解决方案

::-webkit-input-placeholder {
  color: red;
}

:-moz-placeholder { /* Firefox 18- */
  color: red;  
}

::-moz-placeholder {  /* Firefox 19+ */
  color: red;  
}

:-ms-input-placeholder {  
   color: red;  
}

以下是了解有关占位符和占位符文字样式的更多信息的两个有用链接

Style Placeholder Text

:placeholder-shown

如何更改占位符文本的颜色

3 个答案: