::selection {
background-color: #FFA;
color: #000;
}这些浏览器支持数据来自 Caniuse，其中包含更多详细信息。数字表示浏览器从该版本及更高版本开始支持该功能。
桌面
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 4 | 2* | 9 | 12 | 3.1 |
移动/平板电脑
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 4.4 | 否 |
(更多信息)
更改文本选择颜色
Chris Coyier 于 发布
我认为这些代码片段是一个好主意，但它们需要更好的描述，脚本的作用是什么，在代码上方提供一个有效的示例。
在撰写本文时，整个网站都是上述内容的一个示例。
“在代码上方提供一个有效的示例……”他提供所有这些代码片段难道还不够吗？哈哈，开玩笑的，我喜欢你做的工作，Chris，但我确实同意Andrew的观点。看到有效的示例会很有帮助，但我认为我们不能要求你做更多的事情。喜欢这个网站，继续努力。
在这个网站上选择任何文本。注意选择颜色不是蓝色。:P
很酷的技巧，但是有没有办法让这种效果在选择或输入元素的焦点高亮显示中起作用？
如果Chris再详细一点，就会显得居高临下，我很感激不被当作傻瓜对待。干杯！
有没有什么方法也可以在Internet Explorer中使用？
应该可以使用
/* 基于Mozilla的浏览器 */
::-moz-selection {
background-color: #FF68B0;
color: #000;
}
/* 在Safari中有效 */
::selection {
background-color: #FF68B0;
color: #FFF;
}
/* 在Opera中有效 */
::-o-selection {
background-color: #FF68B0;
color: #FFF;
}
::-ms-selection {
background-color: #FF68B0;
color: #FFF;
}
/* 在Internet Explorer中有效 */
::-webkit-selection {
background-color: #FF68B0;
color: #FFF;
}
嗨，Chris，你真是个绝世高手！
此页面上的所有链接都很漂亮！我正在使用alpha主题，但我无法更改链接的外观！拜托拜托，我求求你告诉我如何像你的链接一样设置链接，拜托拜托，我已经尝试将各种CSS代码放入自定义CSS区域，但我的链接没有任何变化……
我在想，除了将正确的代码添加到CSS区域之外，是否还有其他操作？我已经尝试过所有方法，我的链接在悬停时仍然有一条线和糟糕的背景颜色……令人沮丧，我的天哪……可能是RW 4.4.2中的alpha主题吗？
你好……
我只是想知道，这是CSS3，我们知道CSS3在当前版本的IE中不起作用……是否有任何替代的CSS方法可以创建，以便我们的网站在IE中也显示相同？
当然，另一种解决方案是使用背景，但除此之外呢？
例如，在IE6中尝试访问此网站。
你知道我的意思吗？
看看
http://css3pie.com.. 这将使一些css3功能在IE中工作.. 我只是部分成功地在我的网站上实现了它..另外，
http://modernizr.com提供了一些其他有用的功能和对旧浏览器的回退支持。希望对您有所帮助
请查看 http://dowebsitesneedtolookexactlythesameineverybrowser.com/
太棒了！:-D
如何更改图像的选择颜色？
IE中怎么样？
如何在IE中更改选择背景颜色。
嗨，Chris，
我很好奇为什么你在v.9中没有包含::selection颜色，而在v.8中使用了它。你对它的使用想法改变了吗？
很棒的技巧.. 非常有用……谢谢 :)
谢谢！
它看起来与我的默认浏览器颜色相同，所以我感觉自己像个傻瓜，没有看到任何变化，但是当我将其粘贴到CSS文件中并修改颜色时，它完美地工作了。
很棒的CSS技巧，但缺少实时示例，请提供代码的有效示例。
我认为它可以正常工作，你需要将文本放在div中，对吧？感谢你的帖子！
你能否向我们展示一下，如果我们有5段文本，我们希望逐一显示，文本如何在一段时间（1分钟等）后发生变化？
请帮我做到这一点。
是的，我也遇到了同样的问题。
还有webkit……
这是世界上学习所有CSS的最佳网站之一。
感谢你提供这段代码，Chris。
谢谢！它完美地工作了！
我期待这个很久了。但不是为了更改选择颜色。我有一个疯狂的想法。我不喜欢复制我网站上的文章。所以我将背景颜色设置为白色，文本颜色设置为黑色，并将光标设置为默认值。因此，当访问者要选择文本时，他们看不到他们选择的内容。他们可能会认为它可能不可复制。他们会陷入幻觉。我太高兴了。
感谢这个简单但有用的CSS。
我的名字是rusafy
@Daniel15：至少根据我的经验，此网站的选择与其他网站上的选择类似。rgb(51, 153, 255)…蓝色！
@css-tricks.com：非常棒的网站，很棒的技巧！给我更多！
不过有一个错误。如果你在一个有样式选择颜色的页面上选择一些文本，然后切换到另一个选项卡（页面），然后再回到第一个页面，选择样式将不再存在。
不幸的是，在我的博客上不起作用:(
::-moz-selection { background-color: #000; color: #03A8E6; } /* 在 Safari 中有效 */ ::selection { background-color: #000; color: #03A8E6; } ::-webkit-selection { background-color: #FFA; color: #000; }
::selection {
background-color: #FFA;
color: #000;
}
它也适用于 Firefox
这确实为我即将完成的一个项目增添了一丝亮点。感谢您提供这个！
感谢您的代码。我一直在想如何更改我的 Genesis 主题的默认文本选择颜色。幸运的是，这个教程引起了我的注意，我只需复制代码并将其放入 CSS 中，然后根据我主题的配色方案更改颜色代码即可。
::selection {
background-color: #gray;
color: #ffffff;
}
嗨，是否可以在一个地方（例如 body 或 html 标签）编写 ::selection 并将其规范应用于整个网站？或者是否需要列出网站上的所有元素，并为每个元素添加 ::selection？嗯，在一个地方添加它而不是列出所有元素会更容易。您怎么看？
它如何与字体更改一起使用
嗨，需要帮助，我能否更改选择选项和选择标签文本颜色……
移动浏览器呢
非常棒，但在 iOS Safari 和 Opera Mini 中存在不足。我在文章中添加了一个支持表格，以便您可以查看。