【问题标题】：CSS - set the background color of ::selection in an INPUT or TEXTAREA in webkit / chrome?CSS - 在 webkit / chrome 的 INPUT 或 TEXTAREA 中设置 ::selection 的背景颜色？
【发布时间】：2013-08-24 08:11:05
【问题描述】：

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

::selection 在常规页面文本上可以正常工作（为了清楚起见，此处省略 -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=695722fcc5cecec10f09e16181dbdf5f&v=c618e057) 中有效，但在 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 覆盖，但未能找到相关属性。

【问题讨论】：

看起来这是一个已知的 webkit 错误：bugs.webkit.org/show_bug.cgi?id=38943。不确定自报告以来是否有任何更新的属性或解决该错误的任何内容？
+1 看起来它在大约四年前也被记录为 chrome bug code.google.com/p/chromium/issues/detail?id=62263
2014年初修复。code.google.com/p/chromium/issues/detail?id=62263
我遇到了同样的问题...只有您的 Firefox 解决方案在 43.0.1 上不起作用。 :/ 不敢相信没有人回答这个问题。我知道我以前看过它，我只是想不出在哪里。

标签： css webkit

【解决方案1】：

bcz，WebKit 跟随 rgba 而不是 #123456

请尝试以下代码：

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

【讨论】：

没用。此外，对于我遇到的所有其他属性，webkit 支持 hex、rgb 和 rgba，所以如果专门针对这个属性进行更改，我会感到惊讶。

【解决方案2】：

我已经在我的 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/

证明

【讨论】：

【解决方案3】：

我一直在寻找这个并且注意到您可以使用:focus 选择器来定义焦点输入字段CSS。那就这样吧：

input:focus {  background: #f7a494; }

希望这会有所帮助。

【讨论】：

这只是改变输入的背景颜色，而不是OP需要的所选部分的背景颜色。