如何在 chrome 浏览器中为 <input> 使用`::selection`？答案

【问题标题】：How can I make use of `::selection` for <input> in chrome browsers?如何在 chrome 浏览器中为 <input> 使用`::selection`？
【发布时间】：2014-01-13 23:44:12
【问题描述】：

我正在尝试为输入值设置背景和颜色。我成功地为 Mozilla 浏览器做到了 ::-moz-selection，但在 Chrome 和其他浏览器（如 Opera）中的 ::selection 不起作用。

Chrome 中表单的屏幕截图-::selection。它失败：

Mozilla Firefox-::-moz-selection 中的表单屏幕截图。它有效：

这是我的代码：

<form>
First name: <input type="text" name="FirstName" value="John"><br>
Last name: <input type="text" name="LastName" value="Doe"><br>
<input type="submit" value="Submit">
</form>

<p>Your first and last name, please!!!.</p>

还有 CSS：

::selection
{
color: #fff;
background: green;
}
::-moz-selection
{
color: #fff;
background: green;
}
input::selection
{
color: #fff;
background: purple;
}
input::-moz-selection
{
color: #fff;
background: purple;
}

谁能告诉我如何让它与 Chrome 和其他浏览器一起工作？用整个代码 here 创建了一个小提琴。

更新：我想澄清一下，问题是关于为<input> 和其他表单字段中的文本添加::selection（首先在问题中解释）。问题不在于 ::selection 用于 Firefox 以外的浏览器中的普通文本（在 Firefox 中运行良好）。在任何浏览器中为非表单元素添加::selection 时，我从来没有遇到过问题。

【问题讨论】：

它适用于我的 Chrome 31。
@Pinal 这是我的 chrome 中小提琴的截图-i.imgur.com/J1kNkrP.png
我使用的是 Chrome 31.0.1650.63（Mac OS X Mavericks）。所有人都是fine。
OP，如果您在 <input> 中谈论选择，那么是的，它在我的 Chrome（31，XP）中也不起作用。紫色仅适用于<input> 元素本身，而不适用于它的“shadow DOM”。
@IamSJ 不幸的是我没有任何解决方案，鉴于MDN 他们说这不再是标准选择器，我认为您可能不走运。

标签： css google-chrome webkit selection browser-support

【解决方案1】：

我认为他们开始支持这个选择器。

::selection 选择器为<input> 中的文本提供颜色现在可以在 Chrome 浏览器上正常工作。你可以在chrome上查看same snippet进行测试。

【讨论】：