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

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

我得到了错误：

验证(css 4.0)："::placeholder“不是有效的伪元素

和

验证(css 4.0)："::-ms-input-placeholder“不是有效的伪元素

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

Answer 1

这段代码适用于我的项目。

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

Answer 2

我很抱歉这是一个迟来的回复，我希望在这之后的人可以使用这个，你可以简单地在::-moz-placeholder和::-webkit之前加上"input“前缀，这取决于预期的浏览器

例如：

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个window和2个Android浏览器上测试时，这并不奇怪--它可以工作。

尝试以下操作：

• ☑️查看我的演示...文字是红色的吗？

• ☑️转到您的实际代码，删除所有额外的选择器，直到只剩下一个选择器。确保选择器没有供应商是前缀...文本red?

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

☑️

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

输入{显示:块；宽度: 80%；轮廓：#930；边框:插入；填充: 3px 5px；边距: 10px auto；}输入：：占位符{ color: red；}输入:焦点{ outline: 0；}