如何格式化 Opera 浏览器的输入占位符文本？答案

【问题标题】：how to format input placeholder text for the Opera browser?如何格式化 Opera 浏览器的输入占位符文本？
【发布时间】：2013-03-19 15:33:40
【问题描述】：

我使用下面的伪元素和伪类为占位符文本设置样式。这可以在除 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;
}

【问题讨论】：

Change an input's HTML5 placeholder color with CSS 的可能重复项
可能的重复状态歌剧不支持占位符。不为 Opera 中的占位符文本样式提供任何替代解决方案。

标签： html css input opera placeholder

【解决方案1】：

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

【讨论】：

虽然我使用 JS 解决方案当然没有问题，但我很好奇如何使用 HTML 和 CSS 解决这个问题
那么您所需要的只是等到它标准化并在短短几年内以无前缀形式实施。 ;-) 顺便说一句，Opera 正在切换到 Chromium 引擎（目前处于alpha 状态），所以 webkit 前缀的临时解决方案在 Opera 15 发布后应该可以工作。
我已经等待了足够长的时间让其他人提供 HTML/CSS 解决方案，但没有任何进展，我只能假设目前没有任何人知道这让 Marat 拥有鉴于 Opera 的当前状态，这是最佳答案。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

::-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

【讨论】：