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

【问题标题】：Error when attempting to change a placeholder's color尝试更改占位符颜色时出错
【发布时间】：2020-02-22 04:05:06
【问题描述】：

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

    ::-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 MVC 框架。

【问题讨论】：

我在生产代码 ::placeholder 和 ::-ms-input-placeholder 中有这两个完全一样的。唯一的区别是它们不像在您的代码中那样独立，而是像这样：html.dark body ::placeholder 也许这是关键。
你用的是什么浏览器？
我正在使用 Chrome，抱歉，您能否扩展 html.dark body :: placeholder 的含义？

标签： html css pseudo-element pseudo-class

【解决方案1】：

我 99% 确定使用不带任何供应商前缀的 ::placeholder 是安全的。毫不奇怪，在所有 3 个窗口和 2 个 Android 浏览器上进行测试时，它可以工作。

尝试以下方法：

☑️查看我的演示...文字是红色的吗？
☑️ 转到您的真实代码并删除所有额外的选择器，直到只剩下一个。确保选择器没有供应商是前缀...文本红色？
☑️ 尝试将::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;
}

&lt;input type="text" placeholder="HUGE RED TEXT AS A PLACEHOLDER"&gt;

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案3】：

此代码适用于我的项目。

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

【讨论】：