在Webkit浏览器中，如何自定义CSS ::selection选择文本的颜色以及列表数字和符号的颜色？

Question

我在我的网站上使用CSS ::selection规则设置了自定义的高亮颜色，但注意到在Webkit浏览器中并不完全适用于所有元素。

这里有一个fiddle示例，以编号列表为例：http://jsfiddle.net/ufGmP/

如果您在Chrome或Safari中突出显示文本，则会看到默认蓝色高亮颜色围绕着项目符号。我已经注意到在每个使用::selection改写默认颜色的网站上都存在此问题;例如，在http://www.smashingmagazine.com/上，如果突出显示整篇文章的标题，则可以看到默认选择颜色。

有人知道解决方法吗？任何帮助将不胜感激！

- R.J.

---

当然没问题！好问题。GMV。 - MicronXD

Answer 1

这是一个自2010年以来一直存在的错误，https://bugs.webkit.org/show_bug.cgi?id=38943。

有些元素无法高亮显示，以下是一个示例，http://jsfiddle.net/AULsp。

HTML

<input type="text" value="This doesn't get highlighed." />
<textarea>This doesn't get highlighed either.</textarea>
<p>This does get highlighted.</p>
<ul>
    <li>The bullets however, don't.</li>
    <li>This bullet concurs.</li>
</ul>

<ol>
    <li>And so does this one.</li>
    <li>And finally, this one.</li>
</ol>
    ​

CSS

body {
    padding:40px;            
}

::-moz-selection{
    background: #900;
    color: #fff;
}

::selection {
    background: #900;
    color: #fff;
    text-shadow: none;
}
input, textarea, ul, ol, p {
    display:block;            
    width:200px;
    margin: 0 0 15px;
}

ul {
    list-style:disc;       
}

ol {
    list-style:decimal;
}

另外，WebKit似乎会在允许使用::selection的元素上突出显示元素的填充和边距，这可能会导致设计看起来相当奇怪。

- Amit G

---

真糟糕，听到这个消息感到非常遗憾。不过，非常感谢您提供的详细信息！ - R.J.

Answer 2

为什么不使用图像作为项目符号，而不是默认的项目符号？比如说...

list-style:none;
padding-left:20px;
background:url(something.gif) 0 50% no-repeat

- zenkaty