CSS - 在 webkit / chrome 中的 INPUT 或 TEXTAREA 中设置 ::selection 的背景颜色？

Question

我正在尝试在我们的网站上设置选择颜色[对于支持此功能的浏览器；不支持的将获取系统默认值；只寻找 CSS 并且不会为此实现 JS]。

:: 选择在常规页面文本上效果很好（为了清楚起见，这里省略了 -moz）。但是，我希望 ::selection 也适用于 INPUT 和 TEXTAREA 元素中的选定文本。以下内容适用于 Firefox (https://d3vv6lp55qjaqc.cloudfront.net/items/3f2m2S342i2a2V0z2C2W/Screen%20Shot%202013-08-21%20at%2012.34.54%20PM.png?X-CloudApp-Visitor-Id=695722fcc5cecec10f0 9e16181dbdf5f&v =c618e057）但not在webkit（chrome或safari）中工作，我得到系统默认的浅蓝色（https://d3vv6lp55qjaqc.cloudfront.net/items/1r2l1X1P2V3g031F152A/Screen%20Shot%202013-08 -21%20at%2012.35.29%20PM.png?X-CloudApp-Visitor-Id=695722fcc5cecec10f09e16181dbdf5f&v=c886aa70):

::selection { background: #f7a494; }
input::selection {  background: #f7a494; }

我四处寻找 -webkit 覆盖，但未能找到相关属性。

Answer 1

我已经在 Mac 上的 Chrome 51.0.2704.103 和 Safari 9.1.1(11601.6.17) 中对此进行了测试，看来这不再是问题。不需要像OP建议的那样进行输入::选择，所需的代码是：

::selection{
  background: #f7a494;
}

::-moz-selection{
  background: #f7a494;
}

如果您仍然遇到此问题，请尝试以下小提琴，如果它有效，则您的代码中可能有其他内容干扰了它。

https://jsfiddle.net/nLftpwjc/

---

证明

Answer 2

如果您想隐藏输入中的文本，请为输入添加相同颜色的文本、焦点和选择选择器，如下所示...：

input[type="text"] {
        color: rgb(255, 255, 255);
    }

    input:focus {
        color: rgb(255, 255, 255);
    }

    input::selection {
        color: rgb(255, 255, 255);
    }

Answer 3

bcz，

WebKit

位于

rgba

后面，而不是

#123456

请尝试以下代码：

input::selection { background:rgba(231,105,105,0.7) }

Answer 4

我刚刚四处寻找这一点，并注意到您可以使用

:focus

选择器来定义聚焦的输入字段 CSS。那就这样吧：

input:focus {  background: #f7a494; }

希望这有帮助。