5

我使用下面的伪元素和伪类为占位符文本设置样式。这可以在除 Opera 之外的所有主要浏览器上完成工作。我的理解是 Opera 不支持样式占位符文本。有谁知道样式化 Opera 输入占位符文本的方法？

CSS

::-webkit-input-placeholder {
    color: red;
    font-size: 10px;
}
::-moz-placeholder {
    color: red;
    font-size: 10px;
}
:-moz-placeholder {
  color: red;
  font-size: 10px;
}
:-ms-input-placeholder {
  color: red;
  font-size: 10px;
}
input:-moz-placeholder {
    color: red;
    font-size: 10px;
}
4

3 回答 3

5

Firefox 和 WebKit 中现有的样式占位符的两种方式都是供应商前缀和非标准的，不应在生产中使用。为了面向未来，请使用 JavaScript 删除placeholder属性并使用value（与绑定占位符样式的类一起使用placeholder）表单字段或附加文本元素来模拟占位符功能。这将在包括 Opera 在内的浏览器（当前和未来的浏览器）中始终如一地工作。

于 2013-03-29T00:51:06.927 回答
2

Opera 从版本 22.0.1471.70（2014 年 6 月 17 日）开始支持占位符文本样式，因此上述 CSS 现在可以使用。

于 2014-07-09T13:48:40.657 回答
2

您可以像这样设置占位符的样式：

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}

我建议检查此链接以检查浏览器兼容性：https ://caniuse.com/#search=input-placeholder

于 2019-02-11T21:32:05.413 回答