CSS-在Webkit / Chrome的INPUT或TEXTAREA中设置:: selection的背景颜色？ [英] CSS - set the background color of ::selection in an INPUT or TEXTAREA in webkit / chrome?

问题描述

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

:: selection在常规页面文本上可以很好地工作（此处省略-moz以保持清晰）。但是，我希望:: selection也可以在INPUT和TEXTAREA元素内的选定文本上使用。以下内容适用于Firefox（

I'm trying to set the selection color on our site [for browsers that support this; unsupported will get the system default; looking for CSS-only & won't implement JS for this].

The ::selection works fine (leaving out -moz for clarity here) on regular page text. However, I want the ::selection to also work on selected text within INPUT and TEXTAREA elements. The following works in 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) but does not work in webkit (chrome or safari), where I get the system-default light blue (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; }

I've looked around for -webkit overrides but haven't been able to find the relevant property.

解决方案

I have tested this on my Mac in Chrome 51.0.2704.103 and Safari 9.1.1(11601.6.17) and it seems this is no longer an issue. There is no need for input::selection like the OP has suggested, the code needed for this is:

::selection{
  background: #f7a494;
}

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

If you are still having this issue try the following fiddle, if it works there may be something else in your code that is interfering with it.

https://jsfiddle.net/nLftpwjc/

---

Proof

这篇关于CSS-在Webkit / Chrome的INPUT或TEXTAREA中设置:: selection的背景颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！