尝试更改占位符的颜色时出错

Question

当我尝试更改占位符的颜色时：

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #909;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #909;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #909;
}
::placeholder { /* Most modern browsers support this now. */
color: #909;
}

我得到错误：

validation(css 4.0(："：：占位符"不是有效的伪元素

和

validation(css 4.0(："：：-ms输入占位符"不是有效的伪元素

当我运行这段代码时，输入的占位符保持不变的灰色，我真的不确定该从哪里开始。我使用的是ASP.NETMVC框架。

Answer 1

此代码适用于我的项目。

<style>
.FilterInputs::placeholder {
color: #d2ddec;
opacity: .8;
}
</style>

Answer 2

很抱歉这是一个延迟的响应，我希望在这之后的人能使用它，你可以简单地把前缀"输入"；在::-moz-placeholder和::-webkit之前，取决于预期的浏览器

例如：

input::-moz-placeholder { /*  Firefox */
color: dimgrey;
opacity: 1; 
}
input::-webkit-input-placeholder { /* Chrome */
color: dimgrey;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: dimgrey;
}
:-ms-input-placeholder { /* Microsoft Edge */
color: dimgrey;
}

Answer 3

我99%确信使用不带任何供应商前缀的::placeholder是安全的。毫无疑问，当在所有3个窗口和2个Android浏览器上进行测试时，它是有效的。

尝试以下操作：

• ☑️查看我的演示。。。文本是红色的吗？

• ☑️转到您的真实代码，删除所有额外的选择器，直到只剩下一个为止。请确保选择器没有供应商is前缀。。。文本为红色？

• ☑️尝试将::placeholder作为</style>标记中的最后一条规则。

• ☑️通过加倍提高特异性。选择器input::placeholder::placeholder

  input {
  display: block;
  width: 80%;
  outline: #930;
  border: inset;
  padding: 3px 5px;
  margin: 10px auto;
  }
  input::placeholder {
  color: red;
  }
  input:focus {
  outline: 0;
  }

  <input type="text" placeholder="HUGE RED TEXT AS A PLACEHOLDER">