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）：“ ::占位符”不是有效的伪元素

和

验证（css 4.0）：“ ::-ms-input-placeholder”不是有效的伪元素

当我运行这段代码时，输入的占位符将保持相同的灰色，我不确定从何处去。我正在使用ASP .NET MVC框架。

Answer 1

此代码适用于我的项目。

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

Answer 2

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

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

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

2 个答案: